add new modals

nym-wallet/src/components/Accounts/AccountsModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from '@mui/material';
-import { Add, Close } from '@mui/icons-material';
+import { Add, ArrowDownwardSharp, Close } from '@mui/icons-material';
+import { TAccount } from 'src/types';
 import { AccountItem } from './AccountItem';
-import { TAccount } from './types';
 
 export const AccountsModal = ({
   show,
@@ -10,16 +10,18 @@ export const AccountsModal = ({
   selectedAccount,
   onClose,
   onAccountSelect,
-  onAddAccount,
-  onEditAccount,
+  onAdd,
+  onEdit,
+  onImport,
 }: {
   show: boolean;
   accounts: TAccount[];
   selectedAccount: TAccount['address'];
   onClose: () => void;
   onAccountSelect: (account: TAccount) => void;
-  onAddAccount: () => void;
-  onEditAccount: (acc: TAccount) => void;
+  onAdd: () => void;
+  onEdit: (acc: TAccount) => void;
+  onImport: () => void;
 }) => (
   <Dialog open={show} onClose={onClose} fullWidth hideBackdrop>
     <DialogTitle>
@@ -42,21 +44,17 @@ export const AccountsModal = ({
             onAccountSelect({ name, address });
             onClose();
           }}
-          onEdit={() => onEditAccount({ name, address })}
+          onEdit={() => onEdit({ name, address })}
           selected={selectedAccount === address}
           key={address}
         />
       ))}
     </DialogContent>
     <DialogActions sx={{ p: 3 }}>
-      <Button
-        fullWidth
-        disableElevation
-        variant="contained"
-        size="large"
-        startIcon={<Add fontSize="small" />}
-        onClick={onAddAccount}
-      >
+      <Button startIcon={<ArrowDownwardSharp />} onClick={onImport}>
+        Import account
+      </Button>
+      <Button disableElevation variant="contained" startIcon={<Add fontSize="small" />} onClick={onAdd}>
         Add new account
       </Button>
     </DialogActions>

nym-wallet/src/components/Accounts/EditAccount.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { v4 as uuid } from 'uuid';
+import { EditAccountModal } from './EditAccountModal';
+
+export default {
+  title: 'Wallet / Multi Account / Edit Account',
+  component: EditAccountModal,
+} as ComponentMeta<typeof EditAccountModal>;
+
+const Template: ComponentStory<typeof EditAccountModal> = (args) => (
+  <Box display="flex" alignContent="center">
+    <EditAccountModal {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  account: { name: 'Account 1', address: uuid() },
+  show: true,
+  onClose: () => {},
+};

nym-wallet/src/components/Accounts/EditAccountModal.tsx

@@ -11,7 +11,7 @@ import {
   Typography,
 } from '@mui/material';
 import { Close } from '@mui/icons-material';
-import { TAccount } from './types';
+import { TAccount } from 'src/types';
 
 export const EditAccountModal = ({
   account,

nym-wallet/src/components/Accounts/ImportAccount.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ImportAccountModal } from './ImportAccountModal';
+
+export default {
+  title: 'Wallet / Multi Account / Import Account',
+  component: ImportAccountModal,
+} as ComponentMeta<typeof ImportAccountModal>;
+
+const Template: ComponentStory<typeof ImportAccountModal> = (args) => (
+  <Box display="flex" alignContent="center">
+    <ImportAccountModal {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  show: true,
+  onClose: () => {},
+  onImport: () => {},
+};

nym-wallet/src/components/Accounts/ImportAccountModal.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { Close } from '@mui/icons-material';
+
+export const ImportAccountModal = ({
+  show,
+  onClose,
+  onImport,
+}: {
+  show: boolean;
+  onClose: () => void;
+  onImport: (mnemonic: string) => void;
+}) => {
+  const [mnemonic, setMnemonic] = useState('');
+
+  useEffect(() => {
+    if (!show) setMnemonic('');
+  }, [show]);
+
+  return (
+    <Dialog open={show} onClose={onClose} fullWidth hideBackdrop>
+      <DialogTitle>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6">Import account</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </Box>
+        <Typography variant="body1" sx={{ color: 'grey.600' }}>
+          Provide mnemonic of account you want to import
+        </Typography>
+      </DialogTitle>
+      <DialogContent sx={{ p: 0 }}>
+        <Box sx={{ px: 3, mt: 1 }}>
+          <TextField
+            placeholder="Paste or type your mnemonic here"
+            fullWidth
+            value={mnemonic}
+            onChange={(e) => setMnemonic(e.target.value)}
+            autoFocus
+            multiline
+            rows={3}
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions sx={{ p: 3 }}>
+        <Button
+          fullWidth
+          disableElevation
+          variant="contained"
+          size="large"
+          onClick={() => onImport(mnemonic)}
+          disabled={!mnemonic.length}
+        >
+          Import account
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

nym-wallet/src/components/Accounts/index.tsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from '@mui/material';
 import { v4 as uuidv4 } from 'uuid';
+import { TAccount } from 'src/types';
 import { EditAccountModal } from './EditAccountModal';
 import { AddAccountModal } from './AddAccountModal';
 import { AccountColor } from './AccountColor';
 import { AccountsModal } from './AccountsModal';
-import { TAccount, TDialog } from './types';
+import { ImportAccountModal } from './ImportAccountModal';
+
+export type TDialog = 'Accounts' | 'Add' | 'Edit' | 'Import';
 
 export const Accounts = ({ storedAccounts }: { storedAccounts: TAccount[] }) => {
   const [accounts, setAccounts] = useState(storedAccounts);
@@ -35,13 +38,14 @@ export const Accounts = ({ storedAccounts }: { storedAccounts: TAccount[] }) =>
         accounts={accounts}
         onAccountSelect={(acc) => setSelectedAccount(acc)}
         selectedAccount={selectedAccount.address}
-        onAddAccount={() => {
+        onAdd={() => {
           setDialogToDisplay('Add');
         }}
-        onEditAccount={(acc) => {
+        onEdit={(acc) => {
           setAccountToEdit(acc);
           setDialogToDisplay('Edit');
         }}
+        onImport={() => setDialogToDisplay('Import')}
       />
       <AddAccountModal
         show={dialogToDisplasy === 'Add'}
@@ -64,6 +68,14 @@ export const Accounts = ({ storedAccounts }: { storedAccounts: TAccount[] }) =>
           setDialogToDisplay('Accounts');
         }}
       />
+      <ImportAccountModal
+        show={dialogToDisplasy === 'Import'}
+        onClose={() => setDialogToDisplay('Accounts')}
+        onImport={(mnemonic) => {
+          setAccounts((accs) => [...accs, { name: 'New Account', address: uuidv4() }]);
+          setDialogToDisplay('Accounts');
+        }}
+      />
     </>
   );
 };

nym-wallet/src/components/Accounts/types.ts

@@ -1,6 +0,0 @@
-export type TAccount = {
-  name: string;
-  address: string;
-};
-
-export type TDialog = 'Accounts' | 'Add' | 'Edit';

nym-wallet/src/hooks/useAccounts.ts

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+import { TDialog } from 'src/components/Accounts';
+
+export const useAccounts = () => {
+  const [accounts, setAccounts] = useState(storedAccounts);
+  const [selectedAccount, setSelectedAccount] = useState(accounts[0]);
+  const [accountToEdit, setAccountToEdit] = useState<TAccount>();
+  const [dialogToDisplay, setDialogToDisplay] = useState<TDialog>();
+
+  return { dialogToDisplay, accounts, accountToEdit, selectedAccount };
+};

nym-wallet/src/requests/account.ts

@@ -30,3 +30,8 @@ export const isPasswordCreated = async (): Promise<boolean> => {
   const res: boolean = await invoke('does_password_file_exist');
   return res;
 };
+
+export const createNewAccount = async (mnemonic: string): Promise<Account> => {
+  const res: Account = await invoke('create_new_account', { mnemonic });
+  return res;
+};

nym-wallet/src/types/global.ts

@@ -74,3 +74,8 @@ export type TCurrency = {
 };
 
 export type Period = 'Before' | { In: number } | 'After';
+
+export type TAccount = {
+  name: string;
+  address: string;
+};