From eda69447deb61941dcce9f65a50e632595043180 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 9 May 2022 13:31:01 +0100
Subject: [PATCH] add how-to modal for creating multi accounts

---
 .../components/Accounts/AccountOverview.tsx   | 15 +++++++
 .../src/components/Accounts/Accounts.tsx      | 31 +++++++++------
 .../components/Accounts/MultiAccountHowTo.tsx | 39 +++++++++++++++++++
 nym-wallet/src/components/Accounts/index.tsx  | 23 +++++++----
 4 files changed, 88 insertions(+), 20 deletions(-)
 create mode 100644 nym-wallet/src/components/Accounts/AccountOverview.tsx
 create mode 100644 nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx

diff --git a/nym-wallet/src/components/Accounts/AccountOverview.tsx b/nym-wallet/src/components/Accounts/AccountOverview.tsx
new file mode 100644
index 0000000000..17830ba319
--- /dev/null
+++ b/nym-wallet/src/components/Accounts/AccountOverview.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import { AccountEntry } from 'src/types';
+import { AccountAvatar } from './AccountAvatar';
+
+export const AccountOverview = ({ account, onClick }: { account: AccountEntry; onClick: () => void }) => (
+  <Button
+    startIcon={<AccountAvatar name={account.id} />}
+    sx={{ color: 'nym.text.dark' }}
+    onClick={onClick}
+    disableRipple
+  >
+    {account.id}
+  </Button>
+);
diff --git a/nym-wallet/src/components/Accounts/Accounts.tsx b/nym-wallet/src/components/Accounts/Accounts.tsx
index 77fd2eba9f..a59b59c95f 100644
--- a/nym-wallet/src/components/Accounts/Accounts.tsx
+++ b/nym-wallet/src/components/Accounts/Accounts.tsx
@@ -1,25 +1,18 @@
-import React, { useContext } from 'react';
-import { Button } from '@mui/material';
-import { AccountsContext } from 'src/context';
+import React, { useContext, useState } from 'react';
+import { AccountsContext, AppContext } from 'src/context';
 import { EditAccountModal } from './EditAccountModal';
 import { AddAccountModal } from './AddAccountModal';
 import { AccountsModal } from './AccountsModal';
-import { AccountAvatar } from './AccountAvatar';
 import { MnemonicModal } from './MnemonicModal';
+import { AccountOverview } from './AccountOverview';
+import { MultiAccountHowTo } from './MultiAccountHowTo';
 
 export const Accounts = () => {
   const { accounts, selectedAccount, setDialogToDisplay } = useContext(AccountsContext);
 
   return accounts && selectedAccount ? (
     <>
-      <Button
-        startIcon={<AccountAvatar name={selectedAccount.id} />}
-        sx={{ color: 'nym.text.dark' }}
-        onClick={() => setDialogToDisplay('Accounts')}
-        disableRipple
-      >
-        {selectedAccount.id}
-      </Button>
+      <AccountOverview account={selectedAccount} onClick={() => setDialogToDisplay('Accounts')} />
       <AccountsModal />
       <AddAccountModal />
       <EditAccountModal />
@@ -27,3 +20,17 @@ export const Accounts = () => {
     </>
   ) : null;
 };
+
+export const SingleAccount = () => {
+  const [showHowToDialog, setShowHowToDialog] = useState(false);
+  const { clientDetails } = useContext(AppContext);
+  return (
+    <>
+      <AccountOverview
+        account={{ id: 'Account 1', address: clientDetails?.client_address || '' }}
+        onClick={() => setShowHowToDialog(true)}
+      />
+      <MultiAccountHowTo show={showHowToDialog} handleClose={() => setShowHowToDialog(false)} />
+    </>
+  );
+};
diff --git a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
new file mode 100644
index 0000000000..4f9f514c47
--- /dev/null
+++ b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Alert, Box, Dialog, DialogContent, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
+import { Close } from '@mui/icons-material';
+
+const passwordCreationSteps = [
+  'Log out',
+  'When signing in, select “Sign in with mnemonic”',
+  'On the next screen click “Create a password for your account”',
+  'Sign in to wallet with your new password',
+  'Now you can create multiple accounts',
+];
+
+export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => (
+  <Dialog open={show} onClose={handleClose} fullWidth hideBackdrop>
+    <DialogTitle>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography variant="h6">Multi accounts</Typography>
+        <IconButton onClick={handleClose}>
+          <Close />
+        </IconButton>
+      </Box>
+      <Typography variant="body1" sx={{ color: 'grey.600' }}>
+        How to set up multiple accounts
+      </Typography>
+    </DialogTitle>
+    <DialogContent>
+      <Stack spacing={2}>
+        <Alert severity="warning" icon={false}>
+          <Typography>In order to create multiple accounts your wallet need password.</Typography>
+          <Typography>Follow steps below to create password.</Typography>
+        </Alert>
+        <Typography>How to create a password for your account</Typography>
+        {passwordCreationSteps.map((step, index) => (
+          <Typography key={step}>{`${index + 1}. ${step}`}</Typography>
+        ))}
+      </Stack>
+    </DialogContent>
+  </Dialog>
+);
diff --git a/nym-wallet/src/components/Accounts/index.tsx b/nym-wallet/src/components/Accounts/index.tsx
index 94e4348091..9e02c40d2b 100644
--- a/nym-wallet/src/components/Accounts/index.tsx
+++ b/nym-wallet/src/components/Accounts/index.tsx
@@ -1,9 +1,16 @@
-import React from 'react';
-import { AccountsProvider } from 'src/context';
-import { Accounts } from './Accounts';
+import React, { useContext } from 'react';
+import { AccountsProvider, AppContext } from 'src/context';
+import { Accounts, SingleAccount } from './Accounts';
 
-export const MultiAccounts = () => (
-  <AccountsProvider>
-    <Accounts />
-  </AccountsProvider>
-);
+export const MultiAccounts = () => {
+  const { loginType } = useContext(AppContext);
+
+  if (loginType === 'password') {
+    return (
+      <AccountsProvider>
+        <Accounts />
+      </AccountsProvider>
+    );
+  }
+  return <SingleAccount />;
+};