take user password when editing account name

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

@@ -15,23 +15,58 @@ import { Close } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
 import { AccountsContext } from 'src/context';
 import { StyledBackButton } from 'src/components/StyledBackButton';
+import { ConfirmPasswordModal } from './ConfirmPasswordModal';
 
 export const EditAccountModal = () => {
-  const { accountToEdit, dialogToDisplay, setDialogToDisplay, handleEditAccount, handleAccountToEdit } =
+  const { accountToEdit, dialogToDisplay, setDialogToDisplay, handleEditAccount, handleAccountToEdit, setError } =
     useContext(AccountsContext);
+
   const [accountName, setAccountName] = useState('');
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const theme = useTheme();
+
   useEffect(() => {
     if (accountToEdit) {
       setAccountName(accountToEdit.id);
     }
   }, [accountToEdit]);
 
+  const handleClose = () => {
+    handleAccountToEdit(undefined);
+    setDialogToDisplay('Accounts');
+  };
+
+  const onConfirmPassword = async (password: string) => {
+    if (accountToEdit) {
+      try {
+        await handleEditAccount({ account: accountToEdit, newAccountName: accountName, password });
+        setShowConfirmPassword(false);
+      } catch (e) {
+        setError(`Error editing account: ${e}`);
+      }
+    }
+  };
+
+  if (showConfirmPassword) {
+    return (
+      <ConfirmPasswordModal
+        modalTitle="Rename account"
+        accountName={accountToEdit?.id}
+        buttonTitle="Confirm"
+        onClose={() => {
+          setShowConfirmPassword(false);
+          setError(undefined);
+        }}
+        onConfirm={onConfirmPassword}
+      />
+    );
+  }
+
   return (
     <Dialog
       open={dialogToDisplay === 'Edit'}
-      onClose={() => setDialogToDisplay('Accounts')}
+      onClose={handleClose}
       fullWidth
       PaperProps={{
         style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
@@ -41,7 +76,7 @@ export const EditAccountModal = () => {
         <DialogTitle>
           <Box display="flex" justifyContent="space-between" alignItems="center">
             <Typography variant="h6">Rename account</Typography>
-            <IconButton onClick={() => setDialogToDisplay('Accounts')}>
+            <IconButton onClick={handleClose}>
               <Close />
             </IconButton>
           </Box>
@@ -60,22 +95,14 @@ export const EditAccountModal = () => {
           </Box>
         </DialogContent>
         <DialogActions sx={{ p: 3, gap: 2 }}>
-          <StyledBackButton
-            onBack={() => {
-              handleAccountToEdit(undefined);
-              setDialogToDisplay('Accounts');
-            }}
-          />
+          <StyledBackButton onBack={handleClose} />
           <Button
             fullWidth
             disableElevation
             variant="contained"
             size="large"
             onClick={() => {
-              if (accountToEdit) {
-                handleEditAccount({ ...accountToEdit, id: accountName });
-                setDialogToDisplay('Accounts');
-              }
+              setShowConfirmPassword(true);
             }}
             disabled={!accountName?.length}
           >

nym-wallet/src/context/accounts.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, Dispatch, SetStateAction, useContext, useEffect, useMemo, useState } from 'react';
 import { AccountEntry } from '@nymproject/types';
-import { addAccount as addAccountRequest, showMnemonicForAccount } from 'src/requests';
+import { addAccount as addAccountRequest, renameAccount, showMnemonicForAccount } from 'src/requests';
 import { useSnackbar } from 'notistack';
 import { AppContext } from './main';
 
@@ -18,7 +18,15 @@ type TAccounts = {
   setDialogToDisplay: (dialog?: TAccountsDialog) => void;
   handleSelectAccount: (data: { accountName: string; password: string }) => Promise<boolean>;
   handleAccountToEdit: (accountId: string | undefined) => void;
-  handleEditAccount: (account: AccountEntry) => void;
+  handleEditAccount: ({
+    account,
+    newAccountName,
+    password,
+  }: {
+    account: AccountEntry;
+    newAccountName: string;
+    password: string;
+  }) => Promise<void>;
   handleImportAccount: (account: AccountEntry) => void;
   handleGetAccountMnemonic: (data: { password: string; accountName: string }) => void;
 };
@@ -67,8 +75,31 @@ export const AccountsProvider: FCWithChildren = ({ children }) => {
       setIsLoading(false);
     }
   };
-  const handleEditAccount = (account: AccountEntry) =>
-    setAccounts((accs) => accs?.map((acc) => (acc.address === account.address ? account : acc)));
+  const handleEditAccount = async ({
+    account,
+    newAccountName,
+    password,
+  }: {
+    account: AccountEntry;
+    newAccountName: string;
+    password: string;
+  }) => {
+    setIsLoading(true);
+    try {
+      await renameAccount({ accountName: account.id, newAccountName, password });
+      setAccounts((accs) =>
+        accs?.map((acc) => (acc.address === account.address ? { ...acc, id: newAccountName } : acc)),
+      );
+      if (selectedAccount?.id === account.id) {
+        setSelectedAccount({ ...selectedAccount, id: newAccountName });
+      }
+      setDialogToDisplay('Accounts');
+    } catch (e) {
+      throw new Error(`Error editing account: ${e}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const handleImportAccount = (account: AccountEntry) => setAccounts((accs) => [...(accs ? [...accs] : []), account]);
 

nym-wallet/src/context/mocks/accounts.tsx

@@ -28,8 +28,15 @@ export const MockAccountsProvider: FCWithChildren = ({ children }) => {
       setIsLoading(false);
     }
   };
-  const handleEditAccount = (account: AccountEntry) =>
-    setAccounts((accs) => accs?.map((acc) => (acc.address === account.address ? account : acc)));
+  const handleEditAccount = async ({
+    password,
+    account,
+    newAccountName,
+  }: {
+    password: string;
+    account: AccountEntry;
+    newAccountName: string;
+  }) => {};
 
   const handleImportAccount = (account: AccountEntry) => setAccounts((accs) => [...(accs ? [...accs] : []), account]);
 

nym-wallet/src/requests/account.ts

@@ -50,3 +50,18 @@ export const archiveWalletFile = async () => invokeWrapper<void>('archive_wallet
 
 export const showMnemonicForAccount = async ({ password, accountName }: { password: string; accountName: string }) =>
   invokeWrapper<string>('show_mnemonic_for_account_in_password', { password, accountId: accountName });
+
+export const renameAccount = async ({
+  password,
+  accountName,
+  newAccountName,
+}: {
+  password: string;
+  accountName: string;
+  newAccountName: string;
+}) =>
+  invokeWrapper<AccountEntry>('rename_account_for_password', {
+    password,
+    accountId: accountName,
+    newAccountId: newAccountName,
+  });