diff --git a/nym-wallet/src/components/ConfirmTX.tsx b/nym-wallet/src/components/ConfirmTX.tsx index c398e2e879..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'; @@ -20,11 +20,7 @@ export const ConfirmTx: React.FC<{ okLabel="Confirm" onOk={onConfirm} onClose={onClose} - SecondaryAction={ - - } + onBack={onPrev} > {children} diff --git a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx index 5172d61821..5d3cfd5dab 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 = () => { ); }; + +export const withBackButton = () => { + const [open, setOpen] = React.useState(true); + const handleClick = () => setOpen(true); + + return ( + + setOpen(false)} + onOk={async () => setOpen(false)} + header="This is a modal" + okLabel="Primary action" + onBack={() => setOpen(false)} + > +

+ Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna + elit ut mollit. +

+ +

+ Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis. +

+
+
+ ); +}; diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx index 9ed684ed54..15baf0a00d 100644 --- a/nym-wallet/src/components/Modals/SimpleModal.tsx +++ b/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; + 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, }) => ( @@ -57,11 +58,12 @@ export const SimpleModal: React.FC<{ {children} - - - {SecondaryAction} + + {onBack && } + +
); 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 }) => ( + +);