Merge pull request #1435 from nymtech/feature/wallet-modal-back-button

Feature/wallet modal back button

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';
 
@@ -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>
-    }
+    onBack={onPrev}
   >
     <Box sx={{ mt: 3 }}>
       {children}

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"
+        onBack={() => setOpen(false)}
+      >
+        <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>
+  );
+};

nym-wallet/src/components/Modals/SimpleModal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Box, Button, Modal, Stack, SxProps, Typography } from '@mui/material';
 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<{
@@ -12,12 +13,12 @@ export const SimpleModal: React.FC<{
   subHeaderStyles?: SxProps;
   onClose?: () => void;
   onOk?: () => Promise<void>;
+  onBack?: () => 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,
+  onBack,
   header,
   subHeader,
   okLabel,
   sx,
-  SecondaryAction,
   children,
 }) => (
   <Modal open={open} onClose={onClose}>
@@ -57,11 +58,12 @@ 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: 2, mt: 2 }}>
+        {onBack && <StyledBackButton onBack={onBack} />}
+        <Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled}>
+          {okLabel}
+        </Button>
+      </Box>
     </Box>
   </Modal>
 );

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>
+);