more multi account ui

nym-wallet/src/components/Accounts.tsx

@@ -16,7 +16,7 @@ import {
   Typography,
 } from '@mui/material';
 import stc from 'string-to-color';
-import { Add, Circle, Close, Edit } from '@mui/icons-material';
+import { Add, CircleTwoTone, Close, Edit } from '@mui/icons-material';
 import { v4 as uuidv4 } from 'uuid';
 
 export type TAccount = {
@@ -24,17 +24,36 @@ export type TAccount = {
   address: string;
 };
 
-const AccountColor = ({ address }: { address: string }) => <Circle sx={{ color: stc(address) }} />;
+type TDialog = 'Accounts' | 'Add' | 'Edit';
 
-const AccountItem = ({ name, address, onSelect }: { name: string; address: string; onSelect: () => void }) => (
-  <ListItem disablePadding disableGutters>
+const AccountColor = ({ address }: { address: string }) => <CircleTwoTone sx={{ color: stc(address) }} />;
+
+const AccountItem = ({
+  name,
+  address,
+  selected,
+  onSelect,
+  onEdit,
+}: {
+  name: string;
+  address: string;
+  selected: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+}) => (
+  <ListItem disablePadding disableGutters sx={selected ? { bgcolor: 'rgba(33, 208, 115, 0.1)' } : {}}>
     <ListItemButton disableRipple onClick={onSelect}>
-      <ListItemAvatar>
+      <ListItemAvatar sx={{ minWidth: 0, mr: 2 }}>
         <AccountColor address={address} />
       </ListItemAvatar>
       <ListItemText primary={name} secondary={address} />
       <ListItemIcon>
-        <IconButton onClick={(e) => e.stopPropagation()}>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit();
+          }}
+        >
           <Edit />
         </IconButton>
       </ListItemIcon>
@@ -42,23 +61,27 @@ const AccountItem = ({ name, address, onSelect }: { name: string; address: strin
   </ListItem>
 );
 
-const AccountModal = ({
+const AccountsModal = ({
   show,
   accounts,
+  selectedAccount,
   onClose,
   onAccountSelect,
   onAddAccount,
+  onEditAccount,
 }: {
   show: boolean;
   accounts: TAccount[];
+  selectedAccount: TAccount['address'];
   onClose: () => void;
   onAccountSelect: (account: TAccount) => void;
   onAddAccount: () => void;
+  onEditAccount: (acc: TAccount) => void;
 }) => (
-  <Dialog open={show} onClose={onClose} fullWidth>
+  <Dialog open={show} onClose={onClose} fullWidth hideBackdrop>
     <DialogTitle>
       <Box display="flex" justifyContent="space-between" alignItems="center">
-        <Typography variant="h6">Account</Typography>
+        <Typography variant="h6">Accounts</Typography>
         <IconButton onClick={onClose}>
           <Close />
         </IconButton>
@@ -76,6 +99,8 @@ const AccountModal = ({
             onAccountSelect({ name, address });
             onClose();
           }}
+          onEdit={() => onEditAccount({ name, address })}
+          selected={selectedAccount === address}
           key={address}
         />
       ))}
@@ -111,10 +136,10 @@ const AddAccountModal = ({
   }, [show]);
 
   return (
-    <Dialog open={show} onClose={onClose} fullWidth>
+    <Dialog open={show} onClose={onClose} fullWidth hideBackdrop>
       <DialogTitle>
         <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography variant="h6">Account</Typography>
+          <Typography variant="h6">Add new account</Typography>
           <IconButton onClick={onClose}>
             <Close />
           </IconButton>
@@ -130,6 +155,7 @@ const AddAccountModal = ({
             fullWidth
             value={accountName}
             onChange={(e) => setAccountName(e.target.value)}
+            autoFocus
           />
         </Box>
       </DialogContent>
@@ -150,38 +176,116 @@ const AddAccountModal = ({
   );
 };
 
+const EditAccountModal = ({
+  account,
+  show,
+  onClose,
+  onEdit,
+}: {
+  account?: TAccount;
+  show: boolean;
+  onClose: () => void;
+  onEdit: (account: TAccount) => void;
+}) => {
+  const [accountName, setAccountName] = useState('');
+
+  useEffect(() => {
+    setAccountName(account ? account?.name : '');
+  }, [account]);
+
+  return (
+    <Dialog open={show} onClose={onClose} fullWidth hideBackdrop>
+      <DialogTitle>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6">Edit account name</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </Box>
+        <Typography variant="body1" sx={{ color: 'grey.600' }}>
+          New wallet address
+        </Typography>
+      </DialogTitle>
+      <DialogContent sx={{ p: 0 }}>
+        <Box sx={{ px: 3, mt: 1 }}>
+          <TextField
+            label="Account name"
+            fullWidth
+            value={accountName}
+            onChange={(e) => setAccountName(e.target.value)}
+            autoFocus
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions sx={{ p: 3 }}>
+        <Button
+          fullWidth
+          disableElevation
+          variant="contained"
+          size="large"
+          onClick={() => account && onEdit({ ...account, name: accountName })}
+          disabled={!accountName?.length}
+        >
+          Edit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
 export const Accounts = ({ storedAccounts }: { storedAccounts: TAccount[] }) => {
   const [accounts, setAccounts] = useState(storedAccounts);
   const [selectedAccount, setSelectedAccount] = useState(accounts[0]);
-  const [showAccountsDialog, setShowAccountsDialog] = useState(false);
-  const [showNewAccountsDialog, setShowNewAccountsDialog] = useState(false);
+  const [accountToEdit, setAccountToEdit] = useState<TAccount>();
+  const [dialogToDisplasy, setDialogToDisplay] = useState<TDialog>();
+
+  useEffect(() => {
+    const selected = accounts.find((acc) => acc.address === selectedAccount.address);
+    if (selected) setSelectedAccount(selected);
+  }, [accounts]);
 
   return (
     <>
       <Button
         startIcon={<AccountColor address={selectedAccount.address} />}
         color="inherit"
-        onClick={() => setShowAccountsDialog(true)}
+        onClick={() => setDialogToDisplay('Accounts')}
       >
         {selectedAccount.name}
       </Button>
-      <AccountModal
-        show={showAccountsDialog}
-        onClose={() => setShowAccountsDialog(false)}
+      <AccountsModal
+        show={dialogToDisplasy === 'Accounts'}
+        onClose={() => setDialogToDisplay(undefined)}
         accounts={accounts}
         onAccountSelect={(acc) => setSelectedAccount(acc)}
+        selectedAccount={selectedAccount.address}
         onAddAccount={() => {
-          setShowAccountsDialog(false);
-          setShowNewAccountsDialog(true);
+          setDialogToDisplay('Add');
+        }}
+        onEditAccount={(acc) => {
+          setAccountToEdit(acc);
+          setDialogToDisplay('Edit');
         }}
       />
       <AddAccountModal
-        show={showNewAccountsDialog}
-        onClose={() => setShowNewAccountsDialog(false)}
+        show={dialogToDisplasy === 'Add'}
+        onClose={() => {
+          setDialogToDisplay(undefined);
+        }}
         onAdd={(name) => {
           setAccounts((accs) => [...accs, { address: uuidv4(), name }]);
-          setShowNewAccountsDialog(false);
-          setShowAccountsDialog(true);
+          setDialogToDisplay('Accounts');
+        }}
+      />
+      <EditAccountModal
+        show={dialogToDisplasy === 'Edit'}
+        account={accountToEdit}
+        onClose={() => {
+          setDialogToDisplay('Accounts');
+        }}
+        onEdit={(account) => {
+          setAccounts((accs) => accs.map((acc) => (acc.address === account.address ? account : acc)));
+          setDialogToDisplay('Accounts');
         }}
       />
     </>