2101889067

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

Pull Request Pull Request #3757: feat: pending transactions widget

Run Details

1233 of 4410 branches covered (27.96%)

Branch coverage included in aggregate %.

37 of 37 new or added lines in 4 files covered. (100.0%)

3480 of 8894 relevant lines covered (39.13%)

36.46 hits per line

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

6.19

/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,
  isMultiSendTxInfo,
  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'

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 (isMultiSendTxInfo(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	isMultiSendTxInfo,
12	isSettingsChangeTxInfo,
13	LocalTransactionStatus,
14	Transaction,
15	} from 'src/logic/safe/store/models/types/gateway.d'
16	import { TxCollapsedActions } from './TxCollapsedActions'
17	import { formatDateTime, formatTime, formatTimeInWords } from 'src/utils/date'
18	import { sameString } from 'src/utils/strings'
19	import { AssetInfo, isTokenTransferAsset } from './hooks/useAssetInfo'
20	import { TransactionStatusProps } from './hooks/useTransactionStatus'
21	import { TxTypeProps } from './hooks/useTransactionType'
22	import { StyledGroupedTransactions, StyledTransaction } from './styled'
23	import { TokenTransferAmount } from './TokenTransferAmount'
24	import { TxsInfiniteScrollContext } from './TxsInfiniteScroll'
25	import { TxLocationContext } from './TxLocationProvider'
26	import { CalculatedVotes } from './TxQueueCollapsed'
27	import { getTxTo, isAwaitingExecution } from './utils'
28	import { userAccountSelector } from 'src/logic/wallets/store/selectors'
29	import { useKnownAddress } from './hooks/useKnownAddress'
30	import useTxStatus from 'src/logic/hooks/useTxStatus'
31	import Spacer from 'src/components/Spacer'
32
33	export const TxInfo = ({ info, name }: { info: AssetInfo; name?: string }): ReactElement \| null => {	1✔
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)) {	×
62	if (isMultiSendTxInfo(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 }>`	1✔
80	color: ${({ theme, color }) => theme.colors[color]};	×
81	`
82
83	const SmallDot = styled(Dot)`	1✔
84	height: 8px;
85	width: 8px;
86	background-color: ${({ theme, color }) => theme.colors[color]} !important;	×
87	`
88
89	const IconText = styled(IconTextSrc)`	1✔
90	p {
91	font-weight: bold;
92	}
93	`
94
95	const TooltipContent = styled.div`	1✔
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 = ({	1✔
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)	×
121	const { ref, lastItemId } = useContext(TxsInfiniteScrollContext)	×
122	const userAddress = useSelector(userAccountSelector)	×
123	const toAddress = getTxTo(transaction)	×
124	const toInfo = useKnownAddress(toAddress)	×
125	const txStatus = useTxStatus(transaction)	×
126	const isPending = txStatus === LocalTransactionStatus.PENDING	×
127	const willBeReplaced = txStatus === LocalTransactionStatus.WILL_BE_REPLACED ? ' will-be-replaced' : ''	×
128
129	const txCollapsedNonce = (
130	<div className={'tx-nonce' + willBeReplaced}>	×
131	<Text size="xl">{nonce}</Text>
132	</div>
133	)
134
135	const txCollapsedType = (
136	<div className={'tx-type' + willBeReplaced}>	×
137	<CustomIconText
138	address={toAddress?.value \|\| '0x'}	×
139	iconUrl={type.icon \|\| toInfo?.logoUri \|\| undefined}	×
140	iconUrlFallback={type.fallbackIcon}
141	text={type.text \|\| toInfo?.name \|\| undefined}	×
142	/>
143	</div>
144	)
145
146	const txCollapsedInfo = (
147	<div className={'tx-info' + willBeReplaced}>{info && <TxInfo info={info} name={toInfo?.name \|\| undefined} />}</div>	×
148	)
149
150	const timestamp = useRef<HTMLDivElement \| null>(null)	×
151
152	const txCollapsedTime = (
153	<div className={'tx-time' + willBeReplaced}>	×
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>	×
157	</TooltipContent>
158	</Tooltip>
159	</div>
160	)
161
162	const txCollapsedVotes = (
163	<div className={'tx-votes' + willBeReplaced}>	×
164	{votes && (	×
165	<IconText
166	color={votes.required > votes.submitted ? 'secondaryLight' : 'primary'}	×
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}>	×
178	{!isPending && userAddress && txLocation !== 'history' && transaction && (	×
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}>	×
187	{isPending ? (	×
188	<CircularProgressPainter color={status.color}>
189	<Loader size="xs" color="pending" />
190	</CircularProgressPainter>
191	) : (
192	isAwaitingExecution(txStatus) && <SmallDot color={status.color} />	×
193	)}
194	<Text size="md" color={status.color} className="col" strong>
195	{status.text}
196	</Text>
197	</div>
198	)
199
200	return isGrouped ? (	×
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' : ''}>	×
212	{txCollapsedNonce}
213	{txCollapsedType}
214	{txCollapsedInfo}
215	{txCollapsedTime}
216	{txCollapsedVotes}
217	{txCollapsedActions}
218	{txCollapsedStatus}
219	</StyledTransaction>
220	)
221	}

gnosis / safe-react / 2101889067

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