From e05e44f4688d064a1209702f594fc9484a2deb6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Wed, 23 Jun 2021 15:03:20 +0100
Subject: [PATCH] fix: issue with prop updating

---
 .../src/pages/Transactions/DetailsCard.js     | 32 +++++++++----------
 .../pages/Transactions/DetailsCard.styles.js  |  8 +++--
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
index 237616a0..3e4582e1 100644
--- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
+++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
@@ -285,6 +285,20 @@ const DetailsRow = ({ it: tx, timezone }) => {
           ) : (
             errorElements
           )}
+          {tx.txClass === 'cashOut' && getStatus(tx) !== 'Cancelled' && (
+            <ActionButton
+              color="primary"
+              Icon={CancelIcon}
+              InverseIcon={CancelInverseIcon}
+              className={classes.cancelTransaction}
+              onClick={() =>
+                setAction({
+                  command: 'cancelTx'
+                })
+              }>
+              Cancel transaction
+            </ActionButton>
+          )}
         </div>
         <div>
           <Label>Other actions</Label>
@@ -297,20 +311,6 @@ const DetailsRow = ({ it: tx, timezone }) => {
               onClick={() => downloadRawLogs(tx, timezone)}>
               Download raw logs
             </ActionButton>
-            {tx.txClass === 'cashOut' && getStatus(tx) !== 'Cancelled' && (
-              <ActionButton
-                color="primary"
-                Icon={CancelIcon}
-                InverseIcon={CancelInverseIcon}
-                className={classes.cancelTransaction}
-                onClick={() =>
-                  setAction({
-                    command: 'cancelTx'
-                  })
-                }>
-                Cancel transaction
-              </ActionButton>
-            )}
           </div>
         </div>
       </div>
@@ -322,12 +322,12 @@ const DetailsRow = ({ it: tx, timezone }) => {
         message={`The user will not be able to redeem the cash, even if they subsequently send the required coins. If they've already sent you coins, you'll need to reconcile this transaction with them manually.`}
         onConfirmed={() => {
           setErrorMessage(null)
+          setAction({ command: null })
           cancelCashOutTransaction({
             variables: {
               id: tx.id
             }
           })
-          setAction({ command: null })
         }}
         onDissmised={() => {
           setAction({ command: null })
@@ -338,4 +338,4 @@ const DetailsRow = ({ it: tx, timezone }) => {
   )
 }
 
-export default memo(DetailsRow, (prev, next) => prev.id === next.id)
+export default memo(DetailsRow)
diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js
index 2d0fa1f1..5b587ba5 100644
--- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js
+++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js
@@ -78,11 +78,13 @@ export default {
     width: 180
   },
   cancelTransaction: {
-    width: 160,
-    marginLeft: 8
+    width: 160
   },
   status: {
-    width: 230
+    width: 230,
+    '& > button': {
+      marginTop: 20
+    }
   },
   transactionId: {
     width: 280