From 0b585a15b751d30380003bfcfb7ca3e4025a07e5 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 17 May 2022 15:39:45 +0100
Subject: [PATCH] use confirm password modal on account selection

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

diff --git a/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
new file mode 100644
index 0000000000..0d59306459
--- /dev/null
+++ b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
@@ -0,0 +1,76 @@
+import React, { useContext, useState } from 'react';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from '@mui/material';
+import { Add, ArrowDownwardSharp, Close } from '@mui/icons-material';
+import { AccountsContext } from 'src/context';
+import { AccountItem } from '../AccountItem';
+import { ConfirmPasswordModal } from './ConfirmPasswordModal';
+
+export const AccountsModal = () => {
+  const { accounts, dialogToDisplay, setDialogToDisplay, setError, handleSelectAccount, selectedAccount } =
+    useContext(AccountsContext);
+  const [accountToSwitchTo, setAccountToSwitchTo] = useState<string>();
+
+  const handleClose = () => {
+    setDialogToDisplay(undefined);
+    setError(undefined);
+    setAccountToSwitchTo(undefined);
+  };
+
+  if (accountToSwitchTo)
+    return (
+      <ConfirmPasswordModal
+        accountName={accountToSwitchTo}
+        onClose={() => {
+          handleClose();
+          setDialogToDisplay('Accounts');
+        }}
+        onConfirm={async (password) => {
+          const isSuccessful = await handleSelectAccount({ password, accountName: accountToSwitchTo });
+          if (isSuccessful) handleClose();
+        }}
+      />
+    );
+
+  return (
+    <Dialog open={dialogToDisplay === 'Accounts'} onClose={handleClose} fullWidth hideBackdrop>
+      <DialogTitle>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6">Accounts</Typography>
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Box>
+        <Typography variant="body1" sx={{ color: 'grey.600' }}>
+          Switch between accounts
+        </Typography>
+      </DialogTitle>
+      <DialogContent sx={{ padding: 0 }}>
+        {accounts?.map(({ id, address }) => (
+          <AccountItem
+            name={id}
+            address={address}
+            key={address}
+            onSelectAccount={() => {
+              if (selectedAccount?.id !== id) {
+                setAccountToSwitchTo(id);
+              }
+            }}
+          />
+        ))}
+      </DialogContent>
+      <DialogActions sx={{ p: 3 }}>
+        <Button startIcon={<ArrowDownwardSharp />} onClick={() => setDialogToDisplay('Import')}>
+          Import account
+        </Button>
+        <Button
+          disableElevation
+          variant="contained"
+          startIcon={<Add fontSize="small" />}
+          onClick={() => setDialogToDisplay('Add')}
+        >
+          Add new account
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};