status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

(Feature) Tooltip equivalent balance may be zero (#1337) 

* Add tooltip info

* Update icon and types

* Hide tooltip when value and balance are equal to 0

* Remove onClick + Improve perfomance issues

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
Mati Dastugue 2020-09-11 16:22:51 -03:00 committed by GitHub
parent 43bc4984b8
commit 9ead8ef95b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 100 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -37,7 +37,7 @@
"prettier": "prettier './src/**/*.{js,jsx,ts,tsx}'",
"release": "electron-builder --mac --linux --windows -p always",
"start-mainnet": "REACT_APP_NETWORK=mainnet yarn start",
"start": "HTTPS=true react-app-rewired start",
"start": "react-app-rewired start",
"test": "NODE_ENV=test && react-app-rewired test --env=jsdom",
"test:coverage": "yarn test --coverage --watchAll=false",
"coveralls": "cat ./coverage/lcov.info | coveralls",

52
src/assets/icons/info.svg Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256
C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216
c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z" fill="#ff0000"/>
</g>
</g>
<g>
<g>
<path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33
C276,223.284,267.046,214.33,256,214.33z" fill="#ff0000" />
</g>
</g>
<g>
<g>
<circle cx="256" cy="162.84" r="27" fill="#ff0000"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

51
src/routes/safe/components/Balances/Coins/index.tsx
View File

@ -1,13 +1,17 @@
import React, { useEffect } from 'react'
import React, { useEffect, useMemo } from 'react'
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 { makeStyles } from '@material-ui/core/styles'
import { List } from 'immutable'
import { useSelector } from 'react-redux'
import { Skeleton } from '@material-ui/lab'
import { styles } from './styles'
import InfoIcon from 'src/assets/icons/info.svg'
import { useStyles } from './styles'
import Img from 'src/components/layout/Img'
import Table from 'src/components/Table'
import { cellWidth } from 'src/components/Table/TableHead'
import Button from 'src/components/layout/Button'
@ -28,11 +32,8 @@ import {
BalanceData,
} from 'src/routes/safe/components/Balances/dataFetcher'
import { extendedSafeTokensSelector, grantedSelector } from 'src/routes/safe/container/selector'
import { Skeleton } from '@material-ui/lab'
import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
const useStyles = makeStyles(styles as any)
type Props = {
showReceiveFunds: () => void
showSendFunds: (tokenAddress: string) => void
@ -51,6 +52,28 @@ export type BalanceDataRow = List<{
value: string
}>
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="Balance 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()
@ -68,7 +91,7 @@ const Coins = (props: Props): React.ReactElement => {
trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Coins' })
}, [trackEvent])
React.useMemo(() => {
useMemo(() => {
setFilteredData(getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate))
}, [activeTokens, selectedCurrency, currencyValues, currencyRate])
@ -102,10 +125,16 @@ const Coins = (props: Props): React.ReactElement => {
// 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}>{row[id] ? row[id] : `0.00 ${selectedCurrency}`}</div>
<div className={classes.currencyValueRow}>
{valueWithCurrency}
<CurrencyTooltip
valueWithCurrency={valueWithCurrency}
balanceWithSymbol={row[BALANCE_TABLE_BALANCE_ID]}
/>
</div>
) : (
<Skeleton animation="wave" />
)

8
src/routes/safe/components/Balances/Coins/styles.ts
View File

@ -1,9 +1,15 @@
import { makeStyles } from '@material-ui/core/styles'
import { sm, xs } from 'src/theme/variables'
export const styles = () => ({
export const useStyles = makeStyles({
iconSmall: {
fontSize: 16,
},
tooltipInfo: {
position: 'relative',
top: '3px',
left: '3px',
},
hide: {
'&:hover': {
backgroundColor: '#fff3e2',