From d98b6b107cafc121ba15312627345b0fd6156c41 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 5 Jul 2022 11:03:11 +0100
Subject: [PATCH 1/5] add back button option to simple modal component

---
 nym-wallet/src/components/ConfirmTX.tsx       |  6 +----
 .../src/components/Modals/SimpleModal.tsx     | 24 +++++++++++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/nym-wallet/src/components/ConfirmTX.tsx b/nym-wallet/src/components/ConfirmTX.tsx
index c398e2e879..11ca9cef3c 100644
--- a/nym-wallet/src/components/ConfirmTX.tsx
+++ b/nym-wallet/src/components/ConfirmTX.tsx
@@ -20,11 +20,7 @@ export const ConfirmTx: React.FC<{
     okLabel="Confirm"
     onOk={onConfirm}
     onClose={onClose}
-    SecondaryAction={
-      <Button fullWidth sx={{ mt: 1 }} size="large" onClick={onPrev}>
-        Cancel
-      </Button>
-    }
+    onSecondaryAction={onPrev}
   >
     <Box sx={{ mt: 3 }}>
       {children}
diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx
index 9ed684ed54..3bc086feb8 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box, Button, Modal, Stack, SxProps, Typography } from '@mui/material';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import CloseIcon from '@mui/icons-material/Close';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import { modalStyle } from './styles';
@@ -12,12 +13,12 @@ export const SimpleModal: React.FC<{
   subHeaderStyles?: SxProps;
   onClose?: () => void;
   onOk?: () => Promise<void>;
+  onSecondaryAction?: () => void;
   header: string;
   subHeader?: string;
   okLabel: string;
   okDisabled?: boolean;
   sx?: SxProps;
-  SecondaryAction?: React.ReactNode;
 }> = ({
   open,
   hideCloseIcon,
@@ -27,11 +28,11 @@ export const SimpleModal: React.FC<{
   onClose,
   okDisabled,
   onOk,
+  onSecondaryAction,
   header,
   subHeader,
   okLabel,
   sx,
-  SecondaryAction,
   children,
 }) => (
   <Modal open={open} onClose={onClose}>
@@ -57,11 +58,20 @@ export const SimpleModal: React.FC<{
 
       {children}
 
-      <Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled} sx={{ mt: 2 }}>
-        {okLabel}
-      </Button>
-
-      {SecondaryAction}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mt: 2 }}>
+        {onSecondaryAction && (
+          <Button
+            disableFocusRipple
+            size="large"
+            variant="outlined"
+            startIcon={<ArrowBackIosNewIcon sx={{ width: 15 }} />}
+            onClick={onSecondaryAction}
+          />
+        )}
+        <Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled}>
+          {okLabel}
+        </Button>
+      </Box>
     </Box>
   </Modal>
 );

From 1648aef1d3b54cf42c0d99f7e421193d5435b093 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 5 Jul 2022 11:16:58 +0100
Subject: [PATCH 2/5] add component story

---
 .../components/Modals/SimpleModal.stories.tsx | 28 +++++++++++++++++++
 .../src/components/Modals/SimpleModal.tsx     |  4 +--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
index 5172d61821..af852d18c9 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
@@ -166,3 +166,31 @@ export const hideCloseIconAndDisplayErrorIcon = () => {
     </BasePage>
   );
 };
+
+export const withBackButton = () => {
+  const [open, setOpen] = React.useState<boolean>(true);
+  const handleClick = () => setOpen(true);
+
+  return (
+    <BasePage handleClick={handleClick}>
+      <SimpleModal
+        open={open}
+        hideCloseIcon
+        onClose={() => setOpen(false)}
+        onOk={async () => setOpen(false)}
+        header="This is a modal"
+        okLabel="Primary action"
+        onSecondaryAction={() => {}}
+      >
+        <p>
+          Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
+          elit ut mollit.
+        </p>
+        <ModalDivider />
+        <p>
+          Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis.
+        </p>
+      </SimpleModal>
+    </BasePage>
+  );
+};
diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx
index 3bc086feb8..991a790176 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.tsx
@@ -58,13 +58,13 @@ export const SimpleModal: React.FC<{
 
       {children}
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mt: 2 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
         {onSecondaryAction && (
           <Button
             disableFocusRipple
             size="large"
             variant="outlined"
-            startIcon={<ArrowBackIosNewIcon sx={{ width: 15 }} />}
+            startIcon={<ArrowBackIosNewIcon sx={{ width: 20 }} />}
             onClick={onSecondaryAction}
           />
         )}

From 3cb08a410eb273ab3151b90b828490f25fcb9f91 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 5 Jul 2022 13:59:46 +0100
Subject: [PATCH 3/5] fix conflicts

---
 .../src/components/Modals/SimpleModal.stories.tsx    |  2 +-
 nym-wallet/src/components/Modals/SimpleModal.tsx     | 12 ++----------
 nym-wallet/src/components/StyledBackButton.tsx       |  9 +++++++++
 3 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 nym-wallet/src/components/StyledBackButton.tsx

diff --git a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
index af852d18c9..a597a852e6 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
@@ -180,7 +180,7 @@ export const withBackButton = () => {
         onOk={async () => setOpen(false)}
         header="This is a modal"
         okLabel="Primary action"
-        onSecondaryAction={() => {}}
+        onSecondaryAction={() => setOpen(false)}
       >
         <p>
           Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx
index 991a790176..77a52df42d 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Button, Modal, Stack, SxProps, Typography } from '@mui/material';
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import CloseIcon from '@mui/icons-material/Close';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import { StyledBackButton } from 'src/components/StyledBackButton';
 import { modalStyle } from './styles';
 
 export const SimpleModal: React.FC<{
@@ -59,15 +59,7 @@ export const SimpleModal: React.FC<{
       {children}
 
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
-        {onSecondaryAction && (
-          <Button
-            disableFocusRipple
-            size="large"
-            variant="outlined"
-            startIcon={<ArrowBackIosNewIcon sx={{ width: 20 }} />}
-            onClick={onSecondaryAction}
-          />
-        )}
+        {onSecondaryAction && <StyledBackButton onBack={onSecondaryAction} />}
         <Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled}>
           {okLabel}
         </Button>
diff --git a/nym-wallet/src/components/StyledBackButton.tsx b/nym-wallet/src/components/StyledBackButton.tsx
new file mode 100644
index 0000000000..c934cc7968
--- /dev/null
+++ b/nym-wallet/src/components/StyledBackButton.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+
+export const StyledBackButton = ({ onBack }: { onBack: () => void }) => (
+  <Button disableFocusRipple size="large" variant="outlined" onClick={onBack}>
+    <ArrowBackIosNewIcon fontSize="small" />
+  </Button>
+);

From 1fc3c9f31c8ab03bdc97ac62b2ca3379afc132d3 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 5 Jul 2022 14:10:54 +0100
Subject: [PATCH 4/5] rename prop

---
 nym-wallet/src/components/ConfirmTX.tsx                  | 2 +-
 nym-wallet/src/components/Modals/SimpleModal.stories.tsx | 2 +-
 nym-wallet/src/components/Modals/SimpleModal.tsx         | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/nym-wallet/src/components/ConfirmTX.tsx b/nym-wallet/src/components/ConfirmTX.tsx
index 11ca9cef3c..8f2345cf8b 100644
--- a/nym-wallet/src/components/ConfirmTX.tsx
+++ b/nym-wallet/src/components/ConfirmTX.tsx
@@ -20,7 +20,7 @@ export const ConfirmTx: React.FC<{
     okLabel="Confirm"
     onOk={onConfirm}
     onClose={onClose}
-    onSecondaryAction={onPrev}
+    onBack={onPrev}
   >
     <Box sx={{ mt: 3 }}>
       {children}
diff --git a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
index a597a852e6..5d3cfd5dab 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
@@ -180,7 +180,7 @@ export const withBackButton = () => {
         onOk={async () => setOpen(false)}
         header="This is a modal"
         okLabel="Primary action"
-        onSecondaryAction={() => setOpen(false)}
+        onBack={() => setOpen(false)}
       >
         <p>
           Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx
index 77a52df42d..15baf0a00d 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.tsx
@@ -13,7 +13,7 @@ export const SimpleModal: React.FC<{
   subHeaderStyles?: SxProps;
   onClose?: () => void;
   onOk?: () => Promise<void>;
-  onSecondaryAction?: () => void;
+  onBack?: () => void;
   header: string;
   subHeader?: string;
   okLabel: string;
@@ -28,7 +28,7 @@ export const SimpleModal: React.FC<{
   onClose,
   okDisabled,
   onOk,
-  onSecondaryAction,
+  onBack,
   header,
   subHeader,
   okLabel,
@@ -59,7 +59,7 @@ export const SimpleModal: React.FC<{
       {children}
 
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
-        {onSecondaryAction && <StyledBackButton onBack={onSecondaryAction} />}
+        {onBack && <StyledBackButton onBack={onBack} />}
         <Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled}>
           {okLabel}
         </Button>

From 6bc4d32573fe1b232e196aaec5ad702db69c68e9 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 5 Jul 2022 14:25:53 +0100
Subject: [PATCH 5/5] remove unused import

---
 nym-wallet/src/components/ConfirmTX.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nym-wallet/src/components/ConfirmTX.tsx b/nym-wallet/src/components/ConfirmTX.tsx
index 8f2345cf8b..02e0754fe2 100644
--- a/nym-wallet/src/components/ConfirmTX.tsx
+++ b/nym-wallet/src/components/ConfirmTX.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FeeDetails } from '@nymproject/types';
-import { Box, Button } from '@mui/material';
+import { Box } from '@mui/material';
 import { SimpleModal } from './Modals/SimpleModal';
 import { ModalFee } from './Modals/ModalFee';