feat(extension): move address book new address form to side drawer

input-output-hk · Jun 2, 2023 · 29f1594 · 29f1594
1 parent 1998185
commit 29f1594
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 35 deletions.
diff --git a/apps/browser-extension-wallet/src/assets/icons/Plus.svg b/apps/browser-extension-wallet/src/assets/icons/Plus.svg
diff --git a/apps/browser-extension-wallet/src/assets/icons/plus.component.svg b/apps/browser-extension-wallet/src/assets/icons/plus.component.svg
diff --git a/...n-wallet/src/features/address-book/components/AddressDetailDrawer/AddressDetailDrawer.tsx b/...n-wallet/src/features/address-book/components/AddressDetailDrawer/AddressDetailDrawer.tsx
@@ -1,10 +1,11 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable complexity */
 import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
 import { useTranslation } from 'react-i18next';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Button, toast, Drawer, DrawerHeader, DrawerNavigation } from '@lace/common';
-import { EditAddressForm, valuesPropType, ValidationOptionsProps, FormKeys } from '@lace/core';
+import { EditAddressForm as AddressForm, valuesPropType, ValidationOptionsProps, FormKeys } from '@lace/core';
 import { validateWalletName, validateWalletAddress } from '@src/utils/validators/address-book';
 import { AddressDetailsSteps, AddressDetailsConfig, AddressDetailsSectionConfig } from './types';
 import { DeleteAddressModal } from '../DeleteAddressModal';
@@ -48,6 +49,7 @@ export type AddressDetailDrawerProps = {
   onConfirmClick: (values: valuesPropType) => unknown;
   onDelete: (address: InitialValuesProps['id']) => unknown;
   visible: boolean;
+  useNewAddressForm?: boolean;
   popupView?: boolean;
 };
 
@@ -57,17 +59,24 @@ export const AddressDetailDrawer = ({
   onConfirmClick,
   visible,
   onDelete,
-  popupView
+  popupView,
+  useNewAddressForm
 }: AddressDetailDrawerProps): React.ReactElement => {
   const { t } = useTranslation();
   const [selectedId, setSelectedId] = useState<number | null>();
   const [stepsConfig, setStepsConfig] = useState<AddressDetailsSectionConfig>(
-    config[initialValues?.id ? AddressDetailsSteps.DETAIL : AddressDetailsSteps.FORM]
+    useNewAddressForm
+      ? config[AddressDetailsSteps.FORM]
+      : config[initialValues?.id ? AddressDetailsSteps.DETAIL : AddressDetailsSteps.FORM]
   );
   useEffect(() => {
-    setStepsConfig(config[initialValues?.id ? AddressDetailsSteps.DETAIL : AddressDetailsSteps.FORM]);
-  }, [initialValues?.id]);
-  const showArrowIcon = stepsConfig.currentSection === AddressDetailsSteps.FORM || popupView;
+    setStepsConfig(
+      useNewAddressForm
+        ? config[AddressDetailsSteps.FORM]
+        : config[initialValues?.id ? AddressDetailsSteps.DETAIL : AddressDetailsSteps.FORM]
+    );
+  }, [initialValues?.id, useNewAddressForm]);
+  const showArrowIcon = (stepsConfig.currentSection === AddressDetailsSteps.FORM && !useNewAddressForm) || popupView;
   const [formValues, setFormValues] = useState<valuesPropType>(initialValues || {});
   const analytics = useAnalyticsContext();
 
@@ -102,10 +111,10 @@ export const AddressDetailDrawer = ({
   const getFieldError = (key: FormKeys) => validations[key]?.(formValues[key]);
 
   const handleOnCancelClick = () => {
-    if (!popupView || initialValues?.id) {
-      setStepsConfig(config[AddressDetailsSteps.DETAIL]);
-    } else {
+    if ((popupView && initialValues?.id) || useNewAddressForm) {
       onCancelClick();
+    } else {
+      setStepsConfig(config[AddressDetailsSteps.DETAIL]);
     }
   };
 
@@ -117,6 +126,16 @@ export const AddressDetailDrawer = ({
     });
   };
 
+  const isNewAddressFormPopup = popupView && !initialValues?.id;
+  const newAddressFormTitle = useNewAddressForm
+    ? t('browserView.addressBook.form.addNewAddress')
+    : t('browserView.addressBook.addressForm.title.add');
+  const drawerHeaderTitle =
+    stepsConfig.currentSection === AddressDetailsSteps.DETAIL
+      ? t('browserView.addressBook.addressDetail.title')
+      : ((isNewAddressFormPopup || useNewAddressForm) && newAddressFormTitle) ||
+        t('browserView.addressBook.editAddress.title');
+
   return (
     <>
       <Drawer
@@ -125,12 +144,8 @@ export const AddressDetailDrawer = ({
         onClose={onClose}
         title={
           <DrawerHeader
-            title={
-              stepsConfig.currentSection === AddressDetailsSteps.DETAIL
-                ? t('browserView.addressBook.addressDetail.title')
-                : (popupView && !initialValues?.id && t('browserView.addressBook.addressForm.title.add')) ||
-                  t('browserView.addressBook.editAddress.title')
-            }
+            title={drawerHeaderTitle}
+            subtitle={useNewAddressForm && t('browserView.addressBook.form.addNewSubtitle')}
           />
         }
         navigation={
@@ -186,7 +201,7 @@ export const AddressDetailDrawer = ({
                 onConfirmClick={onConfirmClick}
                 getFieldError={getFieldError}
                 onClose={onClose}
-                isNewAddress={popupView && !initialValues?.id}
+                isNewAddress={isNewAddressFormPopup || useNewAddressForm}
                 currentName={initialValues?.name}
               />
             )}
@@ -197,7 +212,7 @@ export const AddressDetailDrawer = ({
       >
         {visible && (
           <>
-            {stepsConfig.currentSection === AddressDetailsSteps.DETAIL && (
+            {stepsConfig.currentSection === AddressDetailsSteps.DETAIL && initialValues && (
               <div className={styles.container} data-testid="address-form-details-container">
                 <div className={styles.body}>
                   <div
@@ -238,7 +253,7 @@ export const AddressDetailDrawer = ({
             )}
             {stepsConfig.currentSection === AddressDetailsSteps.FORM && (
               <div className={styles.container} data-testid="address-form-container">
-                <EditAddressForm
+                <AddressForm
                   {...{
                     initialValues,
                     setFormValues,

diff --git a/apps/browser-extension-wallet/src/lib/translations/en.json b/apps/browser-extension-wallet/src/lib/translations/en.json
@@ -409,7 +409,7 @@
     },
     "addressBook.title": "Address book",
     "addressBook.addressList.addItem.title": "Your saved addresses",
-    "addressBook.addressList.addItem.button": "+ Add new address",
+    "addressBook.addressList.addItem.button": "Add address",
     "addressBook.emptyState.title": "You don't have any saved addresses",
     "addressBook.emptyState.message": "Save your favorites to your address book for easy access right here",
     "addressBook.emptyState.button": "Add address",
@@ -436,6 +436,8 @@
     "addressBook.form.addressMissing": "Address field is required",
     "addressBook.form.addressHasWhiteSpace": "Address has unnecessary white space",
     "addressBook.form.incorrectCardanoAddress": "Incorrect Cardano address",
+    "addressBook.form.addNewAddress": "Add new address",
+    "addressBook.form.addNewSubtitle": "Save your favorite addresses to find them easily",
     "voting.pageTitle": "Voting",
     "voting.catalystRegistrationFlow.title": "Wallet registration",
     "voting.educationalList.title": "About governance",

diff --git a/...rc/views/browser-view/features/adress-book/components/AddressBook/AddressBook.module.scss b/...rc/views/browser-view/features/adress-book/components/AddressBook/AddressBook.module.scss
@@ -7,6 +7,16 @@
   margin-left: -#{size_unit(2)};
 }
 
-.educationalList {
-  margin-top: size_unit(4);
+.titleContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .addAddressBtn {
+    max-height: 48px !important;
+  }
+}
+
+.btnIcon {
+  font-size: 20px;
 }
diff --git a/...wallet/src/views/browser-view/features/adress-book/components/AddressBook/AddressBook.tsx b/...wallet/src/views/browser-view/features/adress-book/components/AddressBook/AddressBook.tsx
@@ -2,17 +2,18 @@ import React, { useMemo, useState, useCallback } from 'react';
 import isNumber from 'lodash/isNumber';
 import { useTranslation } from 'react-i18next';
 import { WalletAddressList, WalletAddressItemProps } from '@lace/core';
+import { Button } from '@lace/common';
 import { withAddressBookContext, useAddressBookContext } from '@src/features/address-book/context';
 import { AddressBookSchema } from '@src/lib/storage';
 import { useAddressBookStore } from '@src/features/address-book/store';
 import { SectionLayout, EducationalList, Layout } from '@src/views/browser-view/components';
-import { AddressForm } from '../AddressForm';
 import { AddressDetailDrawer } from '@src/features/address-book/components/AddressDetailDrawer';
 import { AddressBookEmpty } from '../AddressBookEmpty';
 import styles from './AddressBook.module.scss';
 import DeleteIcon from '@assets/icons/delete-icon.component.svg';
 import AddIcon from '@assets/icons/add.component.svg';
 import EditIcon from '@assets/icons/edit.component.svg';
+import PlusIcon from '@assets/icons/plus.component.svg';
 import Book from '@assets/icons/book.svg';
 import { PageTitle } from '@components/Layout';
 import { LACE_APP_ID } from '@src/utils/constants';
@@ -29,6 +30,7 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
   const { list: addressList, count: addressCount, utils } = useAddressBookContext();
   const { extendLimit, saveRecord: saveAddress, updateRecord: updateAddress, deleteRecord: deleteAddress } = utils;
   const [isFormVisible, setIsFormVisible] = useState<boolean>(false);
+  const [isNewAddressForm, setIsNewAddressForm] = useState(false);
   const analytics = useAnalyticsContext();
 
   const addressListTranslations = {
@@ -95,23 +97,30 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
         });
   };
 
+  const handleAddAddressClick = () => {
+    setIsNewAddressForm(true);
+    setIsFormVisible(true);
+  };
+
   if (!isNumber(addressCount)) return <span />;
 
   const sidePanel = (
-    <>
-      <AddressForm initialValues={addressToEdit} onConfirmClick={onAddressSave} />
-      <div className={styles.educationalList}>
-        <EducationalList items={educationalList} title={translate('browserView.sidePanel.aboutYourWallet')} />
-      </div>
-    </>
+    <EducationalList items={educationalList} title={translate('browserView.sidePanel.aboutYourWallet')} />
   );
 
   return (
     <Layout>
       <SectionLayout sidePanelContent={sidePanel}>
-        <PageTitle amount={addressCount} data-testid="address-book-page-title">
-          {translate('browserView.addressBook.title')}
-        </PageTitle>
+        <div className={styles.titleContainer}>
+          <PageTitle amount={addressCount} data-testid="address-book-page-title">
+            {translate('browserView.addressBook.title')}
+          </PageTitle>
+          <Button onClick={handleAddAddressClick} className={styles.addAddressBtn}>
+            <PlusIcon className={styles.btnIcon} />
+            {translate('browserView.addressBook.addressList.addItem.button')}
+          </Button>
+        </div>
+
         {addressCount ? (
           <>
             <div className={styles.listContainer}>
@@ -129,10 +138,11 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
           <AddressBookEmpty />
         )}
         <AddressDetailDrawer
-          initialValues={addressToEdit}
+          initialValues={!isNewAddressForm ? addressToEdit : undefined}
           onCancelClick={() => {
             setAddressToEdit({} as AddressBookSchema);
             setIsFormVisible(false);
+            setIsNewAddressForm(false);
           }}
           onConfirmClick={onAddressSave}
           onDelete={(id) =>
@@ -142,6 +152,7 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
             })
           }
           visible={isFormVisible}
+          useNewAddressForm={isNewAddressForm}
         />
       </SectionLayout>
     </Layout>