feat: status message on hover

This commit is contained in:
Sérgio Salgado 2020-12-03 16:55:20 +00:00 committed by Josh Harvey
parent b72956f92f
commit 6170624be0
2 changed files with 29 additions and 4 deletions

View file

@ -1,4 +1,4 @@
import { makeStyles, Box } from '@material-ui/core' import { makeStyles, Box, Tooltip } from '@material-ui/core'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import moment from 'moment' import moment from 'moment'
import React, { memo } from 'react' import React, { memo } from 'react'
@ -19,7 +19,7 @@ import { onlyFirstToUpper } from 'src/utils/string'
import CopyToClipboard from './CopyToClipboard' import CopyToClipboard from './CopyToClipboard'
import styles from './DetailsCard.styles' import styles from './DetailsCard.styles'
import { getStatus } from './helper' import { getStatus, getStatusDetails } from './helper'
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)
@ -53,6 +53,8 @@ const DetailsRow = ({ it: tx }) => {
) )
} }
console.log(tx)
return ( return (
<div className={classes.wrapper}> <div className={classes.wrapper}>
<div className={classes.row}> <div className={classes.row}>
@ -185,7 +187,9 @@ const DetailsRow = ({ it: tx }) => {
<div className={classes.lastRow}> <div className={classes.lastRow}>
<div> <div>
<Label>Transaction status</Label> <Label>Transaction status</Label>
<span className={classes.bold}>{getStatus(tx)}</span> <Tooltip disableFocusListener title={getStatusDetails(tx)}>
<span className={classes.bold}>{getStatus(tx)}</span>
</Tooltip>
</div> </div>
</div> </div>
</div> </div>

View file

@ -5,6 +5,13 @@ const getCashOutStatus = it => {
return 'Pending' return 'Pending'
} }
const getCashOutStatusDetails = it => {
if (it.hasError) return it.hasError
if (it.dispense) return ''
if (it.expired) return ''
return 'Pending'
}
const getCashInStatus = it => { const getCashInStatus = it => {
if (it.operatorCompleted) return 'Cancelled' if (it.operatorCompleted) return 'Cancelled'
if (it.hasError) return 'Error' if (it.hasError) return 'Error'
@ -13,6 +20,14 @@ const getCashInStatus = it => {
return 'Pending' return 'Pending'
} }
const getCashInStatusDetails = it => {
if (it.operatorCompleted) return ''
if (it.hasError) return it.hasError
if (it.sendConfirmed) return ''
if (it.expired) return ''
return 'Pending'
}
const getStatus = it => { const getStatus = it => {
if (it.txClass === 'cashOut') { if (it.txClass === 'cashOut') {
return getCashOutStatus(it) return getCashOutStatus(it)
@ -20,4 +35,10 @@ const getStatus = it => {
return getCashInStatus(it) return getCashInStatus(it)
} }
export { getStatus } const getStatusDetails = it => {
return it.txClass === 'cashOut'
? getCashOutStatusDetails(it)
: getCashInStatusDetails(it)
}
export { getStatus, getStatusDetails }