feat: status message on hover

new-lamassu-admin/src/pages/Transactions/DetailsCard.js

@@ -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 moment from 'moment'
 import React, { memo } from 'react'
@@ -19,7 +19,7 @@ import { onlyFirstToUpper } from 'src/utils/string'
 
 import CopyToClipboard from './CopyToClipboard'
 import styles from './DetailsCard.styles'
-import { getStatus } from './helper'
+import { getStatus, getStatusDetails } from './helper'
 
 const useStyles = makeStyles(styles)
 
@@ -53,6 +53,8 @@ const DetailsRow = ({ it: tx }) => {
     )
   }
 
+  console.log(tx)
+
   return (
     <div className={classes.wrapper}>
       <div className={classes.row}>
@@ -185,7 +187,9 @@ const DetailsRow = ({ it: tx }) => {
       <div className={classes.lastRow}>
         <div>
           <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>

new-lamassu-admin/src/pages/Transactions/helper.js

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