1992671886

Build # 1992671886

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/5317b23b372695583181e0f2f867e12cbd602f8c">5317b23b3<a href="https://github.com/gnosis/safe-react/commit/5317b23b372695583181e0f2f867e12cbd602f8c">">Merge </a><a class="double-link" href="https://github.com/gnosis/safe-react/commit/<a class="double-link" href="https://github.com/gnosis/safe-react/commit/47a6edc7e054d1a400ccabdc90145e7862d09c82">47a6edc7e</a>">47a6edc7e</a><a href="https://github.com/gnosis/safe-react/commit/5317b23b372695583181e0f2f867e12cbd602f8c"> into 540067740">540067740</a>

Pull Request Pull Request #3675: fix: track all events

Run Details

1206 of 4332 branches covered (27.84%)

Branch coverage included in aggregate %.

121 of 121 new or added lines in 40 files covered. (100.0%)

3429 of 8834 relevant lines covered (38.82%)

36.11 hits per line

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

0.0

/src/routes/safe/components/Balances/Coins/index.tsx

import { useEffect, useMemo } from 'react'
import styled from 'styled-components'
import { useSelector } from 'react-redux'
import { List } from 'immutable'
import TableCell from '@material-ui/core/TableCell'
import Tooltip from '@material-ui/core/Tooltip'
import TableContainer from '@material-ui/core/TableContainer'
import TableRow from '@material-ui/core/TableRow'
import { Skeleton } from '@material-ui/lab'

import InfoIcon from 'src/assets/icons/info_red.svg'
import { FixedIcon, Text, Button } from '@gnosis.pm/safe-react-components'

import Img from 'src/components/layout/Img'
import Table from 'src/components/Table'
import { cellWidth } from 'src/components/Table/TableHead'
import Row from 'src/components/layout/Row'
import { BALANCE_ROW_TEST_ID } from 'src/routes/safe/components/Balances'
import AssetTableCell from 'src/routes/safe/components/Balances/AssetTableCell'
import {
  BALANCE_TABLE_ASSET_ID,
  BALANCE_TABLE_BALANCE_ID,
  BALANCE_TABLE_VALUE_ID,
  generateColumns,
  getBalanceData,
  BalanceData,
} from 'src/routes/safe/components/Balances/dataFetcher'
import { extendedSafeTokensSelector, grantedSelector } from 'src/routes/safe/container/selector'
import { makeStyles } from '@material-ui/core/styles'
import { styles } from './styles'
import { currentCurrencySelector } from 'src/logic/currencyValues/store/selectors'
import { trackEventMemoized } from 'src/utils/googleTagManager'
import { ASSETS_EVENTS } from 'src/utils/events/assets'
import Track from 'src/components/Track'
import { currentSafe } from 'src/logic/safe/store/selectors'
import { currentChainId } from 'src/logic/config/store/selectors'

const StyledButton = styled(Button)`
  &&.MuiButton-root {
    margin: 4px 12px 4px 0px;
    padding: 0 12px;
    min-width: auto;
  }
  svg {
    margin: 0 6px 0 0;
  }
`

const useStyles = makeStyles(styles)

type Props = {
  showReceiveFunds: () => void
  showSendFunds: (tokenAddress: string) => void
}

type CurrencyTooltipProps = {
  valueWithCurrency: string
  balanceWithSymbol: string
}

const CurrencyTooltip = (props: CurrencyTooltipProps): React.ReactElement | null => {
  const { balanceWithSymbol, valueWithCurrency } = props
  const classes = useStyles()
  const balance = balanceWithSymbol.replace(/[^\d.-]/g, '')
  const value = valueWithCurrency.replace(/[^\d.-]/g, '')
  if (!Number(value) && Number(balance)) {
    return (
      <Tooltip placement="top" title="Value may be zero due to missing token price information">
        <span>
          <Img className={classes.tooltipInfo} alt="Info Tooltip" height={16} src={InfoIcon} />
        </span>
      </Tooltip>
    )
  }
  return null
}

const Coins = (props: Props): React.ReactElement => {
  const { showReceiveFunds, showSendFunds } = props
  const classes = useStyles()
  const columns = generateColumns()
  const autoColumns = columns.filter((c) => !c.custom)
  const selectedCurrency = useSelector(currentCurrencySelector)
  const safeTokens = useSelector(extendedSafeTokensSelector)
  const granted = useSelector(grantedSelector)
  const chainId = useSelector(currentChainId)
  const { address } = useSelector(currentSafe)

  const differingTokens = useMemo(() => safeTokens.size, [safeTokens])
  useEffect(() => {
    trackEventMemoized({ ...ASSETS_EVENTS.DIFFERING_TOKENS, label: differingTokens }, chainId, address)
  }, [differingTokens, chainId, address])

  const filteredData: List<BalanceData> = useMemo(
    () => getBalanceData(safeTokens, selectedCurrency),
    [safeTokens, selectedCurrency],
  )

  return (
    <TableContainer>
      <Table columns={columns} data={filteredData} defaultRowsPerPage={100} label="Balances" size={filteredData.size}>
        {(sortedData) =>
          sortedData.map((row, index) => (
            <TableRow className={classes.hide} data-testid={BALANCE_ROW_TEST_ID} key={index} tabIndex={-1}>
              {autoColumns.map((column) => {
                const { align, id, width } = column
                let cellItem
                switch (id) {
                  case BALANCE_TABLE_ASSET_ID: {
                    cellItem = <AssetTableCell asset={row[id]} />
                    break
                  }
                  case BALANCE_TABLE_BALANCE_ID: {
                    cellItem = <div data-testid={`balance-${row[BALANCE_TABLE_ASSET_ID].symbol}`}>{row[id]}</div>
                    break
                  }
                  case BALANCE_TABLE_VALUE_ID: {
                    // If there are no values for that row but we have balances, we display as '0.00 {CurrencySelected}'
                    // In case we don't have balances, we display a skeleton
                    const showCurrencyValueRow = row[id] || row[BALANCE_TABLE_BALANCE_ID]
                    const valueWithCurrency = row[id] ? row[id] : `0.00 ${selectedCurrency}`
                    cellItem =
                      showCurrencyValueRow && selectedCurrency ? (
                        <div className={classes.currencyValueRow}>
                          {valueWithCurrency}
                          <CurrencyTooltip
                            valueWithCurrency={valueWithCurrency}
                            balanceWithSymbol={row[BALANCE_TABLE_BALANCE_ID]}
                          />
                        </div>
                      ) : (
                        <Skeleton animation="wave" />
                      )
                    break
                  }
                  default: {
                    cellItem = null
                    break
                  }
                }
                return (
                  <TableCell align={align} component="td" key={id} style={cellWidth(width)}>
                    {cellItem}
                  </TableCell>
                )
              })}
              <TableCell component="td">
                <Row align="end" className={classes.actions}>
                  {granted && (
                    <Track {...ASSETS_EVENTS.SEND}>
                      <StyledButton
                        color="primary"
                        onClick={() => showSendFunds(row.asset.address)}
                        size="md"
                        variant="contained"
                        data-testid="balance-send-btn"
                      >
                        <FixedIcon type="arrowSentWhite" />
                        <Text size="xl" color="white">
                          Send
                        </Text>
                      </StyledButton>
                    </Track>
                  )}
                  <Track {...ASSETS_EVENTS.RECEIVE}>
                    <StyledButton color="primary" onClick={showReceiveFunds} size="md" variant="contained">
                      <FixedIcon type="arrowReceivedWhite" />
                      <Text size="xl" color="white">
                        Receive
                      </Text>
                    </StyledButton>
                  </Track>
                </Row>
              </TableCell>
            </TableRow>
          ))
        }
      </Table>
    </TableContainer>
  )
}

export default Coins

1	import { useEffect, useMemo } from 'react'
2	import styled from 'styled-components'
3	import { useSelector } from 'react-redux'
4	import { List } from 'immutable'
5	import TableCell from '@material-ui/core/TableCell'
6	import Tooltip from '@material-ui/core/Tooltip'
7	import TableContainer from '@material-ui/core/TableContainer'
8	import TableRow from '@material-ui/core/TableRow'
9	import { Skeleton } from '@material-ui/lab'
10
11	import InfoIcon from 'src/assets/icons/info_red.svg'
12	import { FixedIcon, Text, Button } from '@gnosis.pm/safe-react-components'
13
14	import Img from 'src/components/layout/Img'
15	import Table from 'src/components/Table'
16	import { cellWidth } from 'src/components/Table/TableHead'
17	import Row from 'src/components/layout/Row'
18	import { BALANCE_ROW_TEST_ID } from 'src/routes/safe/components/Balances'
19	import AssetTableCell from 'src/routes/safe/components/Balances/AssetTableCell'
20	import {
21	BALANCE_TABLE_ASSET_ID,
22	BALANCE_TABLE_BALANCE_ID,
23	BALANCE_TABLE_VALUE_ID,
24	generateColumns,
25	getBalanceData,
26	BalanceData,
27	} from 'src/routes/safe/components/Balances/dataFetcher'
28	import { extendedSafeTokensSelector, grantedSelector } from 'src/routes/safe/container/selector'
29	import { makeStyles } from '@material-ui/core/styles'
30	import { styles } from './styles'
31	import { currentCurrencySelector } from 'src/logic/currencyValues/store/selectors'
32	import { trackEventMemoized } from 'src/utils/googleTagManager'
33	import { ASSETS_EVENTS } from 'src/utils/events/assets'
34	import Track from 'src/components/Track'
35	import { currentSafe } from 'src/logic/safe/store/selectors'
36	import { currentChainId } from 'src/logic/config/store/selectors'
37
38	const StyledButton = styled(Button)`	×
39	&&.MuiButton-root {
40	margin: 4px 12px 4px 0px;
41	padding: 0 12px;
42	min-width: auto;
43	}
44	svg {
45	margin: 0 6px 0 0;
46	}
47	`
48
49	const useStyles = makeStyles(styles)	×
50
51	type Props = {
52	showReceiveFunds: () => void
53	showSendFunds: (tokenAddress: string) => void
54	}
55
56	type CurrencyTooltipProps = {
57	valueWithCurrency: string
58	balanceWithSymbol: string
59	}
60
61	const CurrencyTooltip = (props: CurrencyTooltipProps): React.ReactElement \| null => {	×
62	const { balanceWithSymbol, valueWithCurrency } = props	×
63	const classes = useStyles()	×
64	const balance = balanceWithSymbol.replace(/[^\d.-]/g, '')	×
65	const value = valueWithCurrency.replace(/[^\d.-]/g, '')	×
66	if (!Number(value) && Number(balance)) {	×
67	return (	×
68	<Tooltip placement="top" title="Value may be zero due to missing token price information">
69	<span>
70	<Img className={classes.tooltipInfo} alt="Info Tooltip" height={16} src={InfoIcon} />
71	</span>
72	</Tooltip>
73	)
74	}
75	return null	×
76	}
77
78	const Coins = (props: Props): React.ReactElement => {	×
79	const { showReceiveFunds, showSendFunds } = props	×
80	const classes = useStyles()	×
81	const columns = generateColumns()	×
82	const autoColumns = columns.filter((c) => !c.custom)	×
83	const selectedCurrency = useSelector(currentCurrencySelector)	×
84	const safeTokens = useSelector(extendedSafeTokensSelector)	×
85	const granted = useSelector(grantedSelector)	×
86	const chainId = useSelector(currentChainId)	×
87	const { address } = useSelector(currentSafe)	×
88
89	const differingTokens = useMemo(() => safeTokens.size, [safeTokens])	×
90	useEffect(() => {	×
91	trackEventMemoized({ ...ASSETS_EVENTS.DIFFERING_TOKENS, label: differingTokens }, chainId, address)	×
92	}, [differingTokens, chainId, address])
93
94	const filteredData: List<BalanceData> = useMemo(	×
95	() => getBalanceData(safeTokens, selectedCurrency),	×
96	[safeTokens, selectedCurrency],
97	)
98
99	return (	×
100	<TableContainer>
101	<Table columns={columns} data={filteredData} defaultRowsPerPage={100} label="Balances" size={filteredData.size}>
102	{(sortedData) =>
103	sortedData.map((row, index) => (	×
104	<TableRow className={classes.hide} data-testid={BALANCE_ROW_TEST_ID} key={index} tabIndex={-1}>	×
105	{autoColumns.map((column) => {
106	const { align, id, width } = column	×
107	let cellItem
108	switch (id) {	×
109	case BALANCE_TABLE_ASSET_ID: {
110	cellItem = <AssetTableCell asset={row[id]} />	×
111	break	×
112	}
113	case BALANCE_TABLE_BALANCE_ID: {
114	cellItem = <div data-testid={`balance-${row[BALANCE_TABLE_ASSET_ID].symbol}`}>{row[id]}</div>	×
115	break	×
116	}
117	case BALANCE_TABLE_VALUE_ID: {
118	// If there are no values for that row but we have balances, we display as '0.00 {CurrencySelected}'
119	// In case we don't have balances, we display a skeleton
120	const showCurrencyValueRow = row[id] \|\| row[BALANCE_TABLE_BALANCE_ID]	×
121	const valueWithCurrency = row[id] ? row[id] : `0.00 ${selectedCurrency}`	×
122	cellItem =	×
123	showCurrencyValueRow && selectedCurrency ? (	×
124	<div className={classes.currencyValueRow}>
125	{valueWithCurrency}
126	<CurrencyTooltip
127	valueWithCurrency={valueWithCurrency}
128	balanceWithSymbol={row[BALANCE_TABLE_BALANCE_ID]}
129	/>
130	</div>
131	) : (
132	<Skeleton animation="wave" />
133	)
134	break	×
135	}
136	default: {
137	cellItem = null	×
138	break	×
139	}
140	}
141	return (	×
142	<TableCell align={align} component="td" key={id} style={cellWidth(width)}>
143	{cellItem}
144	</TableCell>
145	)
146	})}
147	<TableCell component="td">
148	<Row align="end" className={classes.actions}>
149	{granted && (	×
150	<Track {...ASSETS_EVENTS.SEND}>
151	<StyledButton
152	color="primary"
153	onClick={() => showSendFunds(row.asset.address)}	×
154	size="md"
155	variant="contained"
156	data-testid="balance-send-btn"
157	>
158	<FixedIcon type="arrowSentWhite" />
159	<Text size="xl" color="white">
160	Send
161	</Text>
162	</StyledButton>
163	</Track>
164	)}
165	<Track {...ASSETS_EVENTS.RECEIVE}>
166	<StyledButton color="primary" onClick={showReceiveFunds} size="md" variant="contained">
167	<FixedIcon type="arrowReceivedWhite" />
168	<Text size="xl" color="white">
169	Receive
170	</Text>
171	</StyledButton>
172	</Track>
173	</Row>
174	</TableCell>
175	</TableRow>
176	))
177	}
178	</Table>
179	</TableContainer>
180	)
181	}
182
183	export default Coins

gnosis / safe-react / 1992671886

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