From 1e3c8ed3e090c52d3630cb22f62ccf086e7cc3c8 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 17 May 2022 15:41:25 +0100
Subject: [PATCH] confirm password modal

---
 .../Accounts/modals/ConfirmPasswordModal.tsx  | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx

diff --git a/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx b/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
new file mode 100644
index 0000000000..5fd48b2da6
--- /dev/null
+++ b/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { Box, Dialog, DialogTitle, IconButton, Typography } from '@mui/material';
+import { ArrowBack } from '@mui/icons-material';
+import { ConfirmPassword } from 'src/components/ConfirmPassword';
+import { AccountsContext } from 'src/context';
+
+export const ConfirmPasswordModal = ({
+  accountName,
+  onClose,
+  onConfirm,
+}: {
+  accountName?: string;
+  onClose: () => void;
+  onConfirm: (password: string) => Promise<void>;
+}) => {
+  const { isLoading, error } = useContext(AccountsContext);
+
+  return (
+    <Dialog open={Boolean(accountName)} onClose={onClose} fullWidth hideBackdrop>
+      <DialogTitle>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6">Switch account</Typography>
+          <IconButton onClick={onClose}>
+            <ArrowBack />
+          </IconButton>
+        </Box>
+        <Typography variant="body1" sx={{ color: 'grey.600' }}>
+          Confirm password
+        </Typography>
+      </DialogTitle>
+      <ConfirmPassword onConfirm={onConfirm} error={error} isLoading={isLoading} buttonTitle="Switch account" />
+    </Dialog>
+  );
+};