TW-1549: Sync settings section

public/_locales/en/messages.json

@@ -189,7 +189,7 @@
     }
   },
   "okGotIt": {
-    "message": "Got it"
+    "message": "Got It"
   },
   "changelogTitle": {
     "message": "Temple Wallet updated"
@@ -3331,19 +3331,22 @@
     "message": "Temple Sync"
   },
   "syncSettingsTitle": {
-    "message": "Sync with Mobile Temple Wallet"
+    "message": "Sync with Temple Wallet app"
   },
   "syncSettingsDescription": {
-    "message": "You can sync your Seed Phrase and accounts (HD) with your mobile device. If you just open the Temple Mobile app for the first time, click 'Sync' button and follow the steps in your phone."
+    "message": "Easily sync your Seed Phrase from current wallet with the mobile app. Just select Sync method for import during the initial setup of the Temple app, and follow the steps to complete."
   },
-  "syncPasswordDescription": {
-    "message": "Use your current wallet password to start the synchronization."
+  "syncSettingsPassword": {
+    "message": "Enter the password to reveal QR-code"
   },
   "syncSettingsAlert": {
-    "message": "Make sure nobody else is looking at your screen when you scan this code."
+    "message": "Make sure nobody else is looking at your screen when you scan this QR-code."
   },
   "scanQRWithTempleMobile": {
-    "message": "Scan this QR-code with yor Temple Wallet Mobile app."
+    "message": "Scan this QR-code with your Temple Wallet\nmobile app to sync."
+  },
+  "syncUnavailable": {
+    "message": "This feature allows you to sync Temple extension with mobile app. You can only sync your Seed Phrase from wallet that supports Tezos network. Switch your current account to proceed synchronization."
   },
   "serviceIsUnavailable": {
     "message": "Sorry, service is temporarily unavailable. Try again later!"

src/app/atoms/CaptionAlert.tsx

@@ -12,6 +12,7 @@ type CaptionAlertType = 'success' | 'error' | 'info' | 'warning';
 interface Props {
   type: CaptionAlertType;
   message: string;
+  title?: string;
   className?: string;
   textClassName?: string;
 }
@@ -24,7 +25,7 @@ const TYPE_CLASSES: Record<CaptionAlertType, string> = {
 };
 
 /** Refer to `./Alert` for existing functionality */
-export const CaptionAlert = memo<Props>(({ type, message, className, textClassName }) => {
+export const CaptionAlert = memo<Props>(({ type, message, title, className, textClassName }) => {
   const Icon = (() => {
     switch (type) {
       case 'success':
@@ -42,7 +43,10 @@ export const CaptionAlert = memo<Props>(({ type, message, className, textClassNa
     <div className={clsx('flex items-start p-3 gap-x-1 rounded-md', TYPE_CLASSES[type], className)}>
       <Icon className="shrink-0 w-6 h-6" />
 
-      <p className={clsx('flex-1 text-font-description', textClassName)}>{message}</p>
+      <div className="flex-1">
+        {title && <p className="text-font-description-bold">{title}</p>}
+        <p className={clsx('text-font-description', textClassName)}>{message}</p>
+      </div>
     </div>
   );
 });

src/app/atoms/action-modal/action-modal.tsx

@@ -20,17 +20,18 @@ export interface ActionModalProps {
   children?: ReactNode | ReactNode[];
   title?: ReactNode;
   headerClassName?: string;
+  contentClassName?: string;
   className?: string;
 }
 
 export const ActionModal = memo<ActionModalProps>(
-  ({ onClose, children, hasCloseButton = true, headerClassName, title }) => {
+  ({ onClose, children, hasCloseButton = true, title, headerClassName, contentClassName, className }) => {
     const { fullPage } = useAppEnv();
 
     return (
       <CustomModal
         isOpen
-        className="rounded-lg"
+        className={clsx('rounded-lg', className)}
         overlayClassName={clsx(
           'backdrop-blur-xs',
           fullPage && [
@@ -42,7 +43,7 @@ export const ActionModal = memo<ActionModalProps>(
         )}
         onRequestClose={onClose}
       >
-        <div className="relative p-3 border-b-0.5 border-lines w-modal">
+        <div className={clsx('relative p-3 border-b-0.5 border-lines w-modal', contentClassName)}>
           <h1 className={clsx('text-center text-font-regular-bold mx-12', headerClassName)}>{title}</h1>
           {hasCloseButton && (
             <Button className="absolute top-3 right-3" onClick={onClose}>

src/app/hooks/use-temple-backend-action-form.ts

@@ -1,39 +1,39 @@
 import { useCallback } from 'react';
 
-import { FieldName, OnSubmit, UseFormOptions, useForm } from 'react-hook-form';
+import { FieldPath, SubmitHandler, UseFormProps, useForm } from 'react-hook-form-v7';
 
 const SUBMIT_ERROR_TYPE = 'submit-error';
 
 export const useTempleBackendActionForm = <T extends object>(
   action: (formData: T) => Promise<void>,
-  submitErrorField: FieldName<T>,
-  options?: UseFormOptions<T>
+  submitErrorField: FieldPath<T>,
+  options?: UseFormProps<T>
 ) => {
-  const { register, handleSubmit, errors, setError, clearError, formState, ...rest } = useForm<T>(options);
-  const submitting = formState.isSubmitting;
+  const { register, handleSubmit, setError, clearErrors, formState, ...rest } = useForm<T>(options);
+  const { isSubmitting, errors } = formState;
 
-  const onSubmit = useCallback<OnSubmit<T>>(
+  const onSubmit = useCallback<SubmitHandler<T>>(
     async formData => {
-      if (submitting) return;
+      if (isSubmitting) return;
 
-      clearError(submitErrorField);
+      clearErrors(submitErrorField);
       try {
         await action(formData);
       } catch (err: any) {
         console.error(err);
 
-        setError(submitErrorField, SUBMIT_ERROR_TYPE, err.message);
+        setError(submitErrorField, { type: SUBMIT_ERROR_TYPE, message: err.message });
       }
     },
-    [submitting, clearError, submitErrorField, action, setError]
+    [isSubmitting, clearErrors, submitErrorField, action, setError]
   );
 
   return {
     register,
     handleSubmit,
     errors,
     setError,
-    clearError,
+    clearErrors,
     formState,
     onSubmit,
     ...rest

src/app/layouts/PageLayout/index.tsx

@@ -43,6 +43,8 @@ export interface PageLayoutProps extends DefaultHeaderProps, ScrollEdgesVisibili
   Header?: ComponentType;
   noScroll?: boolean;
   contentPadding?: boolean;
+  contentClassName?: string;
+  paperClassName?: string;
   dimBg?: boolean;
   headerChildren?: ReactNode;
 }
@@ -52,6 +54,8 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
   children,
   noScroll = false,
   contentPadding = true,
+  contentClassName,
+  paperClassName,
   dimBg = true,
   headerChildren,
   onBottomEdgeVisibilityChange,
@@ -76,6 +80,7 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
 
       <div id={APP_CONTENT_WRAP_DOM_ID} className={clsx(fullPage && FULL_PAGE_WRAP_CLASSNAME)}>
         <ContentPaper
+          className={paperClassName}
           onBottomEdgeVisibilityChange={onBottomEdgeVisibilityChange}
           bottomEdgeThreshold={bottomEdgeThreshold}
           onTopEdgeVisibilityChange={onTopEdgeVisibilityChange}
@@ -88,7 +93,8 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
               'flex-grow flex flex-col',
               noScroll && 'overflow-hidden',
               contentPadding && 'p-4 pb-15',
-              dimBg && 'bg-background'
+              dimBg && 'bg-background',
+              contentClassName
             )}
           >
             <SuspenseContainer errorMessage="displaying this page">{children}</SuspenseContainer>

src/app/pages/AccountSettings/confirm-reveal-private-key-access-modal.tsx

@@ -1,5 +1,7 @@
 import React, { memo, useCallback } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -54,7 +56,7 @@ export const ConfirmRevealPrivateKeyAccessModal = memo<ConfirmRevealPrivateKeyAc
       [account, onReveal, revealPrivateKey]
     );
 
-    const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+    const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
       revealSecretKeys,
       'password'
     );
@@ -64,18 +66,24 @@ export const ConfirmRevealPrivateKeyAccessModal = memo<ConfirmRevealPrivateKeyAc
       <ActionModal title={t('confirmAccess')} onClose={onClose}>
         <form onSubmit={handleSubmit(onSubmit)}>
           <ActionModalBodyContainer>
-            <FormField
-              ref={register({ required: t('required') })}
-              label={t('enterPasswordToRevealPrivateKey')}
-              labelContainerClassName="text-grey-2"
-              id="revealprivatekey-secret-password"
-              type="password"
+            <Controller
               name="password"
-              placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-              errorCaption={errors.password?.message}
-              reserveSpaceForError={false}
-              containerClassName="mb-1"
-              testID={AccountSettingsSelectors.passwordInput}
+              control={control}
+              rules={{ required: t('required') }}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label={t('enterPasswordToRevealPrivateKey')}
+                  labelContainerClassName="text-grey-2"
+                  id="revealprivatekey-secret-password"
+                  type="password"
+                  placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                  errorCaption={errors.password?.message}
+                  reserveSpaceForError={false}
+                  containerClassName="mb-1"
+                  testID={AccountSettingsSelectors.passwordInput}
+                />
+              )}
             />
           </ActionModalBodyContainer>
           <ActionModalButtonsContainer>

src/app/pages/AccountSettings/edit-account-name-modal.tsx

@@ -1,5 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -36,7 +38,7 @@ export const EditAccountNameModal = memo<EditAccountNameModalProps>(({ account,
     [account.id, editAccountName, onClose]
   );
 
-  const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+  const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
     renameAccount,
     'name',
     { defaultValues: renameFormInitialValues }
@@ -47,24 +49,30 @@ export const EditAccountNameModal = memo<EditAccountNameModalProps>(({ account,
     <ActionModal title={t('editAccountName')} onClose={onClose}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <ActionModalBodyContainer>
-          <FormField
-            ref={register({
+          <Controller
+            name="name"
+            control={control}
+            rules={{
               required: t('required'),
               pattern: {
                 value: ACCOUNT_OR_GROUP_NAME_PATTERN,
                 message: t('accountOrGroupNameInputTitle')
               }
-            })}
-            label={t('accountNameInputLabel')}
-            labelContainerClassName="text-grey-2"
-            id="rename-account-input"
-            type="text"
-            name="name"
-            placeholder={account.name}
-            errorCaption={errors.name?.message}
-            reserveSpaceForError={false}
-            containerClassName="mb-1"
-            testID={AccountSettingsSelectors.accountNameInput}
+            }}
+            render={({ field }) => (
+              <FormField
+                {...field}
+                label={t('accountNameInputLabel')}
+                labelContainerClassName="text-grey-2"
+                id="rename-account-input"
+                type="text"
+                placeholder={account.name}
+                errorCaption={errors.name?.message}
+                reserveSpaceForError={false}
+                containerClassName="mb-1"
+                testID={AccountSettingsSelectors.accountNameInput}
+              />
+            )}
           />
         </ActionModalBodyContainer>
         <ActionModalButtonsContainer>

src/app/pages/AccountSettings/remove-account-modal.tsx

@@ -1,5 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { Alert, FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -42,7 +44,7 @@ export const RemoveAccountModal = memo<RemoveAccountModalProps>(({ account, onCl
     },
     [account.id, onClose, removeAccount]
   );
-  const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+  const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
     deleteAccount,
     'password'
   );
@@ -77,16 +79,22 @@ export const RemoveAccountModal = memo<RemoveAccountModalProps>(({ account, onCl
       ) : (
         <form onSubmit={handleSubmit(onSubmit)}>
           <ActionModalBodyContainer>
-            <FormField
-              ref={register({ required: t('required') })}
-              id="removewallet-secret-password"
-              type="password"
+            <Controller
               name="password"
-              placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-              errorCaption={errors.password?.message}
-              reserveSpaceForError={false}
-              containerClassName="mb-1"
-              testID={AccountSettingsSelectors.passwordInput}
+              control={control}
+              rules={{ required: t('required') }}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  id="removewallet-secret-password"
+                  type="password"
+                  placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                  errorCaption={errors.password?.message}
+                  reserveSpaceForError={false}
+                  containerClassName="mb-1"
+                  testID={AccountSettingsSelectors.passwordInput}
+                />
+              )}
             />
             <span className="text-font-description text-grey-1 w-full text-center">
               This will remove the account from this list and delete all data associated with it.