Merge pull request #1743 from RafaelTaranto/backport/explicitly-show-errors-on-tx-page

LAM-539 backport: explicitly show errors on tx page

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

@@ -17,6 +17,7 @@ const CopyToClipboard = ({
   buttonClassname,
   children,
   wrapperClassname,
+  removeSpace = true,
   ...props
 }) => {
   const [anchorEl, setAnchorEl] = useState(null)
@@ -46,7 +47,8 @@ const CopyToClipboard = ({
             {children}
           </div>
           <div className={classnames(classes.buttonWrapper, buttonClassname)}>
-            <ReactCopyToClipboard text={R.replace(/\s/g, '')(children)}>
+            <ReactCopyToClipboard
+              text={removeSpace ? R.replace(/\s/g, '')(children) : children}>
               <button
                 aria-describedby={id}
                 onClick={event => handleClick(event)}>

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

@@ -191,6 +191,13 @@ const DetailsRow = ({ it: tx, timezone }) => {
     <>
       <Label>Transaction status</Label>
       <span className={classes.bold}>{getStatus(tx)}</span>
+      {getStatusDetails(tx) ? (
+        <CopyToClipboard removeSpace={false} className={classes.errorCopy}>
+          {getStatusDetails(tx)}
+        </CopyToClipboard>
+      ) : (
+        <></>
+      )}
     </>
   )
 
@@ -392,13 +399,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
       </div>
       <div className={classes.lastRow}>
         <div className={classes.status}>
-          {getStatusDetails(tx) ? (
+          {errorElements}
-            <HoverableTooltip parentElements={errorElements} width={200}>
-              <P>{getStatusDetails(tx)}</P>
-            </HoverableTooltip>
-          ) : (
-            errorElements
-          )}
           {((tx.txClass === 'cashOut' && getStatus(tx) === 'Pending') ||
             (tx.txClass === 'cashIn' && getStatus(tx) === 'Batched')) && (
             <ActionButton

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

@@ -1,7 +1,7 @@
 import typographyStyles from 'src/components/typography/styles'
 import { offColor, comet, white, tomato } from 'src/styling/variables'
 
-const { p } = typographyStyles
+const { p, label3 } = typographyStyles
 
 export default {
   wrapper: {
@@ -137,5 +137,10 @@ export default {
   },
   swept: {
     width: 250
+  },
+  errorCopy: {
+    extend: label3,
+    lineBreak: 'normal',
+    maxWidth: 180
   }
 }