2696365428

Committed 19 Jul 2022 08:53AM UTC coverage: 41.614% (+4.0%) from 37.631%

Build Type

github

Committed by GitHub

Commit Message

Merge f9d935e5e into 00aa76326

Pull Request Pull Request #4024: Release 3.29.0

Run Details

1756 of 5111 branches covered (34.36%)

Branch coverage included in aggregate %.

227 of 293 new or added lines in 36 files covered. (77.47%)

4 existing lines in 4 files now uncovered.

4581 of 10117 relevant lines covered (45.28%)

38.47 hits per line

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

43.3

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

import { Dot, IconText as IconTextSrc, Loader, Text, Tooltip } from '@gnosis.pm/safe-react-components'
import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
import { ReactElement, useContext, useRef } from 'react'
import styled from 'styled-components'
import { MultiSend, Custom } from '@gnosis.pm/safe-react-gateway-sdk'
import { useSelector } from 'react-redux'

import { CustomIconText } from 'src/components/CustomIconText'
import {
  isCustomTxInfo,
  isSettingsChangeTxInfo,
  LocalTransactionStatus,
  Transaction,
} from 'src/logic/safe/store/models/types/gateway.d'
import { TxCollapsedActions } from './TxCollapsedActions'
import { formatDateTime, formatTime, formatTimeInWords } from 'src/utils/date'
import { sameString } from 'src/utils/strings'
import { AssetInfo, isTokenTransferAsset } from './hooks/useAssetInfo'
import { TransactionStatusProps } from './hooks/useTransactionStatus'
import { TxTypeProps } from './hooks/useTransactionType'
import { StyledGroupedTransactions, StyledTransaction } from './styled'
import { TokenTransferAmount } from './TokenTransferAmount'
import { TxsInfiniteScrollContext } from './TxsInfiniteScroll'
import { TxLocationContext } from './TxLocationProvider'
import { CalculatedVotes } from './TxQueueCollapsed'
import { getTxTo, isAwaitingExecution } from './utils'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
import { useKnownAddress } from './hooks/useKnownAddress'
import useTxStatus from 'src/logic/hooks/useTxStatus'
import Spacer from 'src/components/Spacer'
import { isSupportedMultiSendCall } from 'src/logic/safe/transactions/multisend'

export const TxInfo = ({ info, name }: { info: AssetInfo; name?: string }): ReactElement | null => {
  if (isTokenTransferAsset(info)) {
    return <TokenTransferAmount assetInfo={info} />
  }

  if (isSettingsChangeTxInfo(info) && !isCustomTxInfo(info)) {
    const UNKNOWN_MODULE = 'Unknown module'

    switch (info.settingsInfo?.type) {
      case 'SET_FALLBACK_HANDLER':
      case 'ADD_OWNER':
      case 'REMOVE_OWNER':
      case 'SWAP_OWNER':
      case 'CHANGE_THRESHOLD':
      case 'CHANGE_IMPLEMENTATION':
      case 'SET_GUARD':
      case 'DELETE_GUARD':
        return <Spacer />
      case 'ENABLE_MODULE':
      case 'DISABLE_MODULE':
        return (
          <Text size="xl" as="span">
            {name || UNKNOWN_MODULE}
          </Text>
        )
    }
  }

  if (isCustomTxInfo(info)) {
    if (isSupportedMultiSendCall(info)) {
      return (
        <Text size="xl" as="span">
          {info.actionCount} {`action${(info as MultiSend).actionCount > 1 ? 's' : ''}`}
        </Text>
      )
    }

    return (
      <Text size="xl" as="span">
        {(info as Custom).methodName}
      </Text>
    )
  }
  return null
}

const CircularProgressPainter = styled.div<{ color: ThemeColors }>`
  color: ${({ theme, color }) => theme.colors[color]};
`

const SmallDot = styled(Dot)`
  height: 8px;
  width: 8px;
  background-color: ${({ theme, color }) => theme.colors[color]} !important;
`

const IconText = styled(IconTextSrc)`
  p {
    font-weight: bold;
  }
`

const TooltipContent = styled.div`
  width: max-content;
`

type TxCollapsedProps = {
  transaction: Transaction
  isGrouped?: boolean
  nonce?: number
  type: TxTypeProps
  info?: AssetInfo
  time: number
  votes?: CalculatedVotes
  status: TransactionStatusProps
}

export const TxCollapsed = ({
  transaction,
  isGrouped = false,
  nonce,
  type,
  info,
  time,
  votes,
  status,
}: TxCollapsedProps): ReactElement => {
  const { txLocation } = useContext(TxLocationContext)
  const { ref, lastItemId } = useContext(TxsInfiniteScrollContext)
  const userAddress = useSelector(userAccountSelector)
  const toAddress = getTxTo(transaction)
  const toInfo = useKnownAddress(toAddress)
  const txStatus = useTxStatus(transaction)
  const isPending = txStatus === LocalTransactionStatus.PENDING
  const willBeReplaced = txStatus === LocalTransactionStatus.WILL_BE_REPLACED ? ' will-be-replaced' : ''

  const txCollapsedNonce = (
    <div className={'tx-nonce' + willBeReplaced}>
      <Text size="xl">{nonce}</Text>
    </div>
  )

  const txCollapsedType = (
    <div className={'tx-type' + willBeReplaced}>
      <CustomIconText
        address={toAddress?.value || '0x'}
        iconUrl={type.icon || toInfo?.logoUri || undefined}
        iconUrlFallback={type.fallbackIcon}
        text={type.text || toInfo?.name || undefined}
      />
    </div>
  )

  const txCollapsedInfo = (
    <div className={'tx-info' + willBeReplaced}>{info && <TxInfo info={info} name={toInfo?.name || undefined} />}</div>
  )

  const timestamp = useRef<HTMLDivElement | null>(null)

  const txCollapsedTime = (
    <div className={'tx-time' + willBeReplaced}>
      <Tooltip title={formatDateTime(time)} arrow backgroundColor="white" size="lg">
        <TooltipContent ref={timestamp}>
          <Text size="xl">{txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)}</Text>
        </TooltipContent>
      </Tooltip>
    </div>
  )

  const txCollapsedVotes = (
    <div className={'tx-votes' + willBeReplaced}>
      {votes && (
        <IconText
          color={votes.required > votes.submitted ? 'secondaryLight' : 'primary'}
          iconType="owners"
          iconSize="sm"
          text={`${votes.votes}`}
          textSize="md"
        />
      )}
    </div>
  )

  const txCollapsedActions = (
    <div className={'tx-actions' + willBeReplaced}>
      {!isPending && userAddress && txLocation !== 'history' && transaction && (
        <TxCollapsedActions transaction={transaction} />
      )}
    </div>
  )

  // attaching ref to a div element as it was causing troubles to add a `ref` to a FunctionComponent
  const txCollapsedStatus = (
    <div className="tx-status" ref={sameString(lastItemId, transaction.id) ? ref : null}>
      {isPending ? (
        <CircularProgressPainter color={status.color}>
          <Loader size="xs" color="pending" />
        </CircularProgressPainter>
      ) : (
        isAwaitingExecution(txStatus) && <SmallDot color={status.color} />
      )}
      <Text size="md" color={status.color} className="col" strong>
        {status.text}
      </Text>
    </div>
  )

  return isGrouped ? (
    <StyledGroupedTransactions>
      {/* no nonce */}
      {txCollapsedType}
      {txCollapsedInfo}
      {txCollapsedTime}
      {txCollapsedVotes}
      {txCollapsedActions}
      {txCollapsedStatus}
    </StyledGroupedTransactions>
  ) : (
    <StyledTransaction className={sameString(status.text, 'Failed') ? 'failed-transaction' : ''}>
      {txCollapsedNonce}
      {txCollapsedType}
      {txCollapsedInfo}
      {txCollapsedTime}
      {txCollapsedVotes}
      {txCollapsedActions}
      {txCollapsedStatus}
    </StyledTransaction>
  )
}

1	import { Dot, IconText as IconTextSrc, Loader, Text, Tooltip } from '@gnosis.pm/safe-react-components'
2	import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
3	import { ReactElement, useContext, useRef } from 'react'
4	import styled from 'styled-components'
5	import { MultiSend, Custom } from '@gnosis.pm/safe-react-gateway-sdk'
6	import { useSelector } from 'react-redux'
7
8	import { CustomIconText } from 'src/components/CustomIconText'
9	import {
10	isCustomTxInfo,
11	isSettingsChangeTxInfo,
12	LocalTransactionStatus,
13	Transaction,
14	} from 'src/logic/safe/store/models/types/gateway.d'
15	import { TxCollapsedActions } from './TxCollapsedActions'
16	import { formatDateTime, formatTime, formatTimeInWords } from 'src/utils/date'
17	import { sameString } from 'src/utils/strings'
18	import { AssetInfo, isTokenTransferAsset } from './hooks/useAssetInfo'
19	import { TransactionStatusProps } from './hooks/useTransactionStatus'
20	import { TxTypeProps } from './hooks/useTransactionType'
21	import { StyledGroupedTransactions, StyledTransaction } from './styled'
22	import { TokenTransferAmount } from './TokenTransferAmount'
23	import { TxsInfiniteScrollContext } from './TxsInfiniteScroll'
24	import { TxLocationContext } from './TxLocationProvider'
25	import { CalculatedVotes } from './TxQueueCollapsed'
26	import { getTxTo, isAwaitingExecution } from './utils'
27	import { userAccountSelector } from 'src/logic/wallets/store/selectors'
28	import { useKnownAddress } from './hooks/useKnownAddress'
29	import useTxStatus from 'src/logic/hooks/useTxStatus'
30	import Spacer from 'src/components/Spacer'
31	import { isSupportedMultiSendCall } from 'src/logic/safe/transactions/multisend'
32
33	export const TxInfo = ({ info, name }: { info: AssetInfo; name?: string }): ReactElement \| null => {	2✔
34	if (isTokenTransferAsset(info)) {	×
35	return <TokenTransferAmount assetInfo={info} />	×
36	}
37
38	if (isSettingsChangeTxInfo(info) && !isCustomTxInfo(info)) {	×
39	const UNKNOWN_MODULE = 'Unknown module'	×
40
41	switch (info.settingsInfo?.type) {	×
42	case 'SET_FALLBACK_HANDLER':
43	case 'ADD_OWNER':
44	case 'REMOVE_OWNER':
45	case 'SWAP_OWNER':
46	case 'CHANGE_THRESHOLD':
47	case 'CHANGE_IMPLEMENTATION':
48	case 'SET_GUARD':
49	case 'DELETE_GUARD':
50	return <Spacer />	×
51	case 'ENABLE_MODULE':
52	case 'DISABLE_MODULE':
53	return (	×
54	<Text size="xl" as="span">
55	{name \|\| UNKNOWN_MODULE}	×
56	</Text>
57	)
58	}
59	}
60
61	if (isCustomTxInfo(info)) {	×
NEW 62	if (isSupportedMultiSendCall(info)) {	×
63	return (	×
64	<Text size="xl" as="span">
65	{info.actionCount} {`action${(info as MultiSend).actionCount > 1 ? 's' : ''}`}	×
66	</Text>
67	)
68	}
69
70	return (	×
71	<Text size="xl" as="span">
72	{(info as Custom).methodName}
73	</Text>
74	)
75	}
76	return null	×
77	}
78
79	const CircularProgressPainter = styled.div<{ color: ThemeColors }>`	2✔
80	color: ${({ theme, color }) => theme.colors[color]};	×
81	`
82
83	const SmallDot = styled(Dot)`	2✔
84	height: 8px;
85	width: 8px;
86	background-color: ${({ theme, color }) => theme.colors[color]} !important;	×
87	`
88
89	const IconText = styled(IconTextSrc)`	2✔
90	p {
91	font-weight: bold;
92	}
93	`
94
95	const TooltipContent = styled.div`	2✔
96	width: max-content;
97	`
98
99	type TxCollapsedProps = {
100	transaction: Transaction
101	isGrouped?: boolean
102	nonce?: number
103	type: TxTypeProps
104	info?: AssetInfo
105	time: number
106	votes?: CalculatedVotes
107	status: TransactionStatusProps
108	}
109
110	export const TxCollapsed = ({	2✔
111	transaction,
112	isGrouped = false,	×
113	nonce,
114	type,
115	info,
116	time,
117	votes,
118	status,
119	}: TxCollapsedProps): ReactElement => {
120	const { txLocation } = useContext(TxLocationContext)	3✔
121	const { ref, lastItemId } = useContext(TxsInfiniteScrollContext)	3✔
122	const userAddress = useSelector(userAccountSelector)	3✔
123	const toAddress = getTxTo(transaction)	3✔
124	const toInfo = useKnownAddress(toAddress)	3✔
125	const txStatus = useTxStatus(transaction)	3✔
126	const isPending = txStatus === LocalTransactionStatus.PENDING	3✔
127	const willBeReplaced = txStatus === LocalTransactionStatus.WILL_BE_REPLACED ? ' will-be-replaced' : ''	3!
128
129	const txCollapsedNonce = (
130	<div className={'tx-nonce' + willBeReplaced}>	3✔
131	<Text size="xl">{nonce}</Text>
132	</div>
133	)
134
135	const txCollapsedType = (
136	<div className={'tx-type' + willBeReplaced}>	3✔
137	<CustomIconText
138	address={toAddress?.value \|\| '0x'}	3!
139	iconUrl={type.icon \|\| toInfo?.logoUri \|\| undefined}	3!
140	iconUrlFallback={type.fallbackIcon}
141	text={type.text \|\| toInfo?.name \|\| undefined}	3!
142	/>
143	</div>
144	)
145
146	const txCollapsedInfo = (
147	<div className={'tx-info' + willBeReplaced}>{info && <TxInfo info={info} name={toInfo?.name \|\| undefined} />}</div>	3!
148	)
149
150	const timestamp = useRef<HTMLDivElement \| null>(null)	3✔
151
152	const txCollapsedTime = (
153	<div className={'tx-time' + willBeReplaced}>	3✔
154	<Tooltip title={formatDateTime(time)} arrow backgroundColor="white" size="lg">
155	<TooltipContent ref={timestamp}>
156	<Text size="xl">{txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)}</Text>	3!
157	</TooltipContent>
158	</Tooltip>
159	</div>
160	)
161
162	const txCollapsedVotes = (
163	<div className={'tx-votes' + willBeReplaced}>	3✔
164	{votes && (	6✔
165	<IconText
166	color={votes.required > votes.submitted ? 'secondaryLight' : 'primary'}	3!
167	iconType="owners"
168	iconSize="sm"
169	text={`${votes.votes}`}
170	textSize="md"
171	/>
172	)}
173	</div>
174	)
175
176	const txCollapsedActions = (
177	<div className={'tx-actions' + willBeReplaced}>	3✔
178	{!isPending && userAddress && txLocation !== 'history' && transaction && (	15✔
179	<TxCollapsedActions transaction={transaction} />
180	)}
181	</div>
182	)
183
184	// attaching ref to a div element as it was causing troubles to add a `ref` to a FunctionComponent
185	const txCollapsedStatus = (
186	<div className="tx-status" ref={sameString(lastItemId, transaction.id) ? ref : null}>	3!
187	{isPending ? (	3!
188	<CircularProgressPainter color={status.color}>
189	<Loader size="xs" color="pending" />
190	</CircularProgressPainter>
191	) : (
192	isAwaitingExecution(txStatus) && <SmallDot color={status.color} />	3!
193	)}
194	<Text size="md" color={status.color} className="col" strong>
195	{status.text}
196	</Text>
197	</div>
198	)
199
200	return isGrouped ? (	3!
201	<StyledGroupedTransactions>
202	{/* no nonce */}
203	{txCollapsedType}
204	{txCollapsedInfo}
205	{txCollapsedTime}
206	{txCollapsedVotes}
207	{txCollapsedActions}
208	{txCollapsedStatus}
209	</StyledGroupedTransactions>
210	) : (
211	<StyledTransaction className={sameString(status.text, 'Failed') ? 'failed-transaction' : ''}>	3!
212	{txCollapsedNonce}
213	{txCollapsedType}
214	{txCollapsedInfo}
215	{txCollapsedTime}
216	{txCollapsedVotes}
217	{txCollapsedActions}
218	{txCollapsedStatus}
219	</StyledTransaction>
220	)
221	}

safe-global / safe-react / 2696365428

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