Implement edit/remove networks/accounts/keys.

src/components/AccountSelection.tsx

@@ -21,20 +21,24 @@ const renderAccountName = (acc: AccountWithAddress): string =>
     ? `${acc.displayName} (${getAbbreviatedAddress(acc.address)})`
     : acc.address;
 
-function AccountSelection(): JSX.Element {
+function AccountSelection(): JSX.Element | null {
   const { selectedAccount, selectAccount } = useWallet();
   const hrp = useCurrentHRP();
   const accounts = useAccountsList(hrp);
   const iconSize = useBreakpointValue({ base: 14, md: 24 }, { ssr: false });
 
+  if (accounts.length === 0) {
+    return null;
+  }
+
   return (
     <Menu>
       <MenuButton
         as={Button}
         variant="ghostGreen"
         fontSize={{ base: '18px', md: '22px' }}
         rightIcon={<IconChevronDown size={iconSize} />}
-        px={0}
+        pr={1}
         noOfLines={1}
         justifyContent="center"
         display="flex"

src/components/ConfirmationAlert.tsx

@@ -0,0 +1,59 @@
+import { useRef } from 'react';
+
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+} from '@chakra-ui/react';
+
+import useConfirmation from '../hooks/useConfirmation';
+
+function ConfirmationAlert(): JSX.Element {
+  const { disclosure } = useConfirmation();
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <AlertDialog
+      leastDestructiveRef={cancelRef}
+      isOpen={disclosure.isOpen}
+      onClose={disclosure.onClose}
+      isCentered
+      size="lg"
+    >
+      <AlertDialogOverlay />
+      <AlertDialogContent>
+        <AlertDialogCloseButton />
+        <AlertDialogHeader fontSize="lg" fontWeight="bold" textAlign="center">
+          {disclosure.header}
+        </AlertDialogHeader>
+
+        <AlertDialogBody>{disclosure.content}</AlertDialogBody>
+
+        <AlertDialogFooter justifyContent="space-between">
+          <Button
+            ref={cancelRef}
+            onClick={disclosure.onClose}
+            variant="whiteModal"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            variant={disclosure.isDanger ? 'danger' : 'whiteModal'}
+            onClick={disclosure.onSubmit}
+            ml={3}
+          >
+            {disclosure.actionLabel}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export default ConfirmationAlert;

src/components/CreateAccountModal.tsx

@@ -4,8 +4,6 @@ import { Form, useForm } from 'react-hook-form';
 import {
   Box,
   Button,
-  Card,
-  CardBody,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -57,8 +55,8 @@ function CreateAccountModal({
   const keys = wallet?.keychain || [];
   const defaultValues = {
     displayName: '',
-    required: 1,
-    publicKeys: [keys[0]?.publicKey || '0x1'],
+    Required: 1,
+    PublicKeys: [keys[0]?.publicKey || '0x1'],
   };
   const {
     watch,
@@ -75,39 +73,44 @@ function CreateAccountModal({
     defaultValues,
   });
   const selectedTemplate = watch('templateAddress');
-  const selectedOwner = watch('owner');
-  const totalAmount = watch('totalAmount');
+  const selectedOwner = watch('Owner');
+  const totalAmount = watch('TotalAmount');
 
   useEffect(() => {
     if (selectedTemplate === StdPublicKeys.Vault) {
-      register('initialUnlockAmount', {
+      register('InitialUnlockAmount', {
         required: 'Please specify the initial unlock amount',
       });
-      return () => unregister('initialUnlockAmount');
+      return () => unregister('InitialUnlockAmount');
     }
     return noop;
   }, [register, selectedTemplate, unregister]);
 
   useEffect(() => {
-    const owner = selectedOwner || getValues('owner');
+    const owner = selectedOwner || getValues('Owner');
     if (Object.hasOwn(GENESIS_VESTING_ACCOUNTS, owner)) {
       const amount =
         GENESIS_VESTING_ACCOUNTS[
           owner as keyof typeof GENESIS_VESTING_ACCOUNTS
         ];
-      setValue('totalAmount', String(amount));
-      setValue('initialUnlockAmount', String(amount / 4n));
-      setValue('vestingStart', GENESIS_VESTING_START);
-      setValue('vestingEnd', GENESIS_VESTING_END);
+      setValue('TotalAmount', String(amount));
+      setValue('InitialUnlockAmount', String(amount / 4n));
+      setValue('VestingStart', GENESIS_VESTING_START);
+      setValue('VestingEnd', GENESIS_VESTING_END);
     }
   }, [getValues, selectedOwner, selectedTemplate, setValue]);
 
   useEffect(() => {
     if (totalAmount) {
-      setValue('initialUnlockAmount', String(BigInt(totalAmount) / 4n));
+      setValue('InitialUnlockAmount', String(BigInt(totalAmount) / 4n));
     }
   }, [totalAmount, setValue]);
 
+  const close = () => {
+    reset(defaultValues);
+    onClose();
+  };
+
   const submit = handleSubmit(async (data) => {
     const success = await withPassword(
       (password) =>
@@ -140,7 +143,7 @@ function CreateAccountModal({
               pre-defined vesting schedule.
             </Text>
             <FormAddressSelect
-              fieldName="owner"
+              fieldName="Owner"
               accounts={accounts.filter(
                 (acc) => acc.templateAddress === StdPublicKeys.Vesting
               )}
@@ -155,7 +158,7 @@ function CreateAccountModal({
             <FormInput
               label="Total amount"
               inputProps={{ type: 'number' }}
-              register={register('totalAmount', {
+              register={register('TotalAmount', {
                 required: 'Please specify total amount locked in the vault',
               })}
               errors={errors}
@@ -164,7 +167,7 @@ function CreateAccountModal({
             <FormInput
               label="Vesting start (layer number)"
               inputProps={{ type: 'number' }}
-              register={register('vestingStart', {
+              register={register('VestingStart', {
                 required: 'Please specify the epoch when the vesting starts',
                 valueAsNumber: true,
               })}
@@ -174,7 +177,7 @@ function CreateAccountModal({
             <FormInput
               label="Vesting end (layer number)"
               inputProps={{ type: 'number' }}
-              register={register('vestingEnd', {
+              register={register('VestingEnd', {
                 required: 'Please specify the epoch when the vesting ends',
                 valueAsNumber: true,
               })}
@@ -193,7 +196,7 @@ function CreateAccountModal({
             <FormInput
               label="Required amount of signatures"
               inputProps={{ type: 'number' }}
-              register={register('required', {
+              register={register('Required', {
                 required: 'Please specify any number from 0 to 10',
                 valueAsNumber: true,
                 validate: (n) => {
@@ -212,7 +215,7 @@ function CreateAccountModal({
             <FormMultiKeySelect
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
-              fieldName="publicKeys"
+              fieldName="PublicKeys"
               keys={keys}
               control={control}
               register={register}
@@ -234,7 +237,7 @@ function CreateAccountModal({
             <FormInput
               label="Required amount of signatures"
               inputProps={{ type: 'number' }}
-              register={register('required', {
+              register={register('Required', {
                 required: 'Please specify any number from 0 to 10',
                 valueAsNumber: true,
                 validate: (n) => {
@@ -253,7 +256,7 @@ function CreateAccountModal({
             <FormMultiKeySelect
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
-              fieldName="publicKeys"
+              fieldName="PublicKeys"
               keys={keys}
               control={control}
               register={register}
@@ -273,21 +276,22 @@ function CreateAccountModal({
               transaction.
             </Text>
             <FormKeySelect
-              fieldName="publicKey"
+              fieldName="PublicKey"
               keys={keys}
               register={register}
               unregister={unregister}
               errors={errors}
               isSubmitted={isSubmitted}
               isRequired
+              value={keys[0]?.publicKey}
             />
           </>
         );
     }
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered size="lg">
+    <Modal isOpen={isOpen} onClose={close} isCentered size="lg">
       <Form control={control}>
         <ModalOverlay />
         <ModalContent>