TW-1544 Implmenent reserving space for an error below FormField

madfish-solutions · Oct 11, 2024 · 7ddbba2 · 7ddbba2
1 parent 8e00f6c
commit 7ddbba2
Show file tree

Hide file tree

Showing 23 changed files with 69 additions and 49 deletions.
diff --git a/src/app/atoms/FormField.tsx b/src/app/atoms/FormField.tsx
@@ -43,6 +43,7 @@ export interface FormFieldProps extends TestIDProperty, Omit<FormFieldAttrs, 'ty
   labelWarning?: ReactNode;
   errorCaption?: ReactNode;
   shouldShowErrorCaption?: boolean;
+  reserveSpaceForError?: boolean;
   warning?: boolean;
   containerClassName?: string;
   labelContainerClassName?: string;
@@ -90,6 +91,7 @@ export const FormField = forwardRef<FormFieldElement, FormFieldProps>(
       labelWarning,
       errorCaption,
       shouldShowErrorCaption = true,
+      reserveSpaceForError = true,
       warning = false,
       containerClassName,
       labelContainerClassName,
@@ -257,7 +259,12 @@ export const FormField = forwardRef<FormFieldElement, FormFieldProps>(
           {secretCovered && <SecretCover onClick={handleSecretBannerClick} />}
         </div>
 
-        {shouldShowErrorCaption && <ErrorCaption errorCaption={errorCaption} />}
+        {shouldShowErrorCaption &&
+          (reserveSpaceForError && !errorCaption ? (
+            <div className="size-4" />
+          ) : (
+            <ErrorCaption errorCaption={errorCaption} />
+          ))}
       </div>
     );
   }

diff --git a/src/app/atoms/PageModal/actions-buttons-box.tsx b/src/app/atoms/PageModal/actions-buttons-box.tsx
@@ -17,7 +17,7 @@ export const ActionsButtonsBox = memo<ActionsButtonsBoxProps>(
     const dispatch = useDispatch();
 
     useEffect(() => {
-      return () => void shouldChangeBottomShift && dispatch(setToastsContainerBottomShiftAction(0));
+      return () => void (shouldChangeBottomShift && dispatch(setToastsContainerBottomShiftAction(0)));
     }, [dispatch, shouldChangeBottomShift]);
 
     const handleResize = useMemo(

diff --git a/src/app/layouts/PageLayout/BackupMnemonicOverlay/index.tsx b/src/app/layouts/PageLayout/BackupMnemonicOverlay/index.tsx
@@ -1,11 +1,12 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useContext, useState } from 'react';
 
 import { ManualBackupModal } from 'app/templates/ManualBackupModal';
-import { toastError, toastSuccess } from 'app/toaster';
+import { toastError } from 'app/toaster';
 import { SHOULD_BACKUP_MNEMONIC_STORAGE_KEY } from 'lib/constants';
 import { t } from 'lib/i18n';
 import { useStorage } from 'lib/temple/front';
 import { clearMnemonicToBackup, getMnemonicToBackup } from 'lib/temple/front/mnemonic-to-backup-keeper';
+import { SuccessfulInitToastContext } from 'lib/temple/front/successful-init-toast-context';
 
 import { BackupOptionsModal } from './backup-options-modal';
 
@@ -14,6 +15,7 @@ export const BackupMnemonicOverlay = memo(() => {
   const [backupSelected, setBackupSelected] = useState(false);
   const [mnemonicToBackup, setMnemonicToBackup] = useState('');
   const [, setShouldBackupMnemonic] = useStorage(SHOULD_BACKUP_MNEMONIC_STORAGE_KEY, false);
+  const [, setInitToast] = useContext(SuccessfulInitToastContext);
 
   const handleBackupOptionSelect = useCallback(async () => {
     const currentMnemonicToBackup = await getMnemonicToBackup();
@@ -29,10 +31,10 @@ export const BackupMnemonicOverlay = memo(() => {
     setBackupSelected(false);
   }, []);
   const handleSeedPhraseVerified = useCallback(() => {
-    toastSuccess(t('backupSuccessful'));
+    setInitToast(t('backupSuccessful'));
     clearMnemonicToBackup();
     setShouldBackupMnemonic(false).catch(e => console.error(e));
-  }, [setShouldBackupMnemonic]);
+  }, [setInitToast, setShouldBackupMnemonic]);
 
   return backupSelected ? (
     <ManualBackupModal

diff --git a/src/app/pages/AccountSettings/confirm-reveal-private-key-access-modal.tsx b/src/app/pages/AccountSettings/confirm-reveal-private-key-access-modal.tsx
@@ -73,6 +73,7 @@ export const ConfirmRevealPrivateKeyAccessModal = memo<ConfirmRevealPrivateKeyAc
               name="password"
               placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
               errorCaption={errors.password?.message}
+              reserveSpaceForError={false}
               containerClassName="mb-1"
               testID={AccountSettingsSelectors.passwordInput}
             />

diff --git a/src/app/pages/AccountSettings/edit-account-name-modal.tsx b/src/app/pages/AccountSettings/edit-account-name-modal.tsx
@@ -62,6 +62,7 @@ export const EditAccountNameModal = memo<EditAccountNameModalProps>(({ account,
             name="name"
             placeholder={account.name}
             errorCaption={errors.name?.message}
+            reserveSpaceForError={false}
             containerClassName="mb-1"
             testID={AccountSettingsSelectors.accountNameInput}
           />

diff --git a/src/app/pages/AccountSettings/remove-account-modal.tsx b/src/app/pages/AccountSettings/remove-account-modal.tsx
@@ -84,6 +84,7 @@ export const RemoveAccountModal = memo<RemoveAccountModalProps>(({ account, onCl
               name="password"
               placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
               errorCaption={errors.password?.message}
+              reserveSpaceForError={false}
               containerClassName="mb-1"
               testID={AccountSettingsSelectors.passwordInput}
             />

diff --git a/src/app/pages/ChainSettings/manage-url-entities-view/create-modal.tsx b/src/app/pages/ChainSettings/manage-url-entities-view/create-modal.tsx
@@ -76,7 +76,7 @@ export const CreateUrlEntityModal = memo(
           const signal = abortAndRenewSignal();
           await createEntity(values, signal);
           closeModal();
-          setTimeout(() => toastSuccess(t(successMessageI18nKey)), CLOSE_ANIMATION_TIMEOUT * 2);
+          setTimeout(() => toastSuccess(t(successMessageI18nKey)), CLOSE_ANIMATION_TIMEOUT + 100);
         } catch (error) {
           if (isAbortError(error)) {
             return;

diff --git a/src/app/pages/ChainSettings/manage-url-entities-view/edit-modal.tsx b/src/app/pages/ChainSettings/manage-url-entities-view/edit-modal.tsx
@@ -121,11 +121,11 @@ export const EditUrlEntityModal = <T extends UrlEntityBase>({
       >
         <form onSubmit={handleSubmit(onSubmit)} className="flex-1 flex flex-col max-h-full">
           <ScrollView
-            className="pt-4 pb-6 gap-4"
+            className="pt-4 pb-6"
             bottomEdgeThreshold={24}
             onBottomEdgeVisibilityChange={setBottomEdgeIsVisible}
           >
-            <SettingsCellGroup>
+            <SettingsCellGroup className="mb-4">
               <SettingsCell cellName={<T id={activeI18nKey} />} Component="div">
                 <Controller
                   control={control}

diff --git a/src/app/pages/Home/Home.tsx b/src/app/pages/Home/Home.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo } from 'react';
 
 import { isDefined } from '@rnw-community/shared';
+import { useDispatch } from 'react-redux';
 
 import {
   AssetsSegmentControl,
@@ -11,13 +12,13 @@ import { SuspenseContainer } from 'app/atoms/SuspenseContainer';
 import { useAppEnv } from 'app/env';
 import { useLocationSearchParamValue } from 'app/hooks/use-location';
 import PageLayout, { PageLayoutProps } from 'app/layouts/PageLayout';
+import { setToastsContainerBottomShiftAction } from 'app/store/settings/actions';
 import { useMainnetTokensScamlistSelector } from 'app/store/tezos/assets/selectors';
 import { ActivityTab } from 'app/templates/activity/Activity';
 import { AdvertisingBanner } from 'app/templates/advertising/advertising-banner/advertising-banner';
 import { AppHeader } from 'app/templates/AppHeader';
 import { toastSuccess } from 'app/toaster';
-import { t } from 'lib/i18n';
-import { SuccessfulImportToastContext } from 'lib/temple/front/successful-import-toast-context';
+import { SuccessfulInitToastContext } from 'lib/temple/front/successful-init-toast-context';
 import { HistoryAction, navigate, useLocation } from 'lib/woozie';
 
 import { CollectiblesTab } from '../Collectibles/CollectiblesTab';
@@ -39,15 +40,21 @@ const Home = memo<HomeProps>(props => {
   const tabSlug = useLocationSearchParamValue('tab');
   const { onboardingCompleted } = useOnboardingProgress();
   const { search } = useLocation();
+  const dispatch = useDispatch();
 
-  const [shouldShowImportToast, setShouldShowImportToast] = useContext(SuccessfulImportToastContext);
+  const [initToastMessage, setInitToastMessage] = useContext(SuccessfulInitToastContext);
 
   useEffect(() => {
-    if (shouldShowImportToast) {
-      setShouldShowImportToast(false);
-      toastSuccess(t('importSuccessful'));
-    }
-  }, [setShouldShowImportToast, shouldShowImportToast]);
+    if (!initToastMessage) return;
+
+    const timeout = setTimeout(() => {
+      dispatch(setToastsContainerBottomShiftAction(0));
+      setInitToastMessage(undefined);
+      toastSuccess(initToastMessage);
+    }, 100);
+
+    return () => clearTimeout(timeout);
+  }, [dispatch, initToastMessage, setInitToastMessage]);
 
   const assetsSegmentControlRef = useAssetsSegmentControlRef();
 

diff --git a/src/app/pages/Home/OtherComponents/Tokens/components/AddTokenModal/AddTokenForm.tsx b/src/app/pages/Home/OtherComponents/Tokens/components/AddTokenModal/AddTokenForm.tsx
@@ -359,13 +359,13 @@ export const AddTokenForm = memo<AddTokenPageProps>(
             onClean={cleanContractAddress}
             placeholder={isTezosChainSelected ? 'KT1v9CmPy…' : '0x0f5d2fb2…'}
             errorCaption={errors.address?.message}
-            containerClassName="mb-6"
+            containerClassName={forCollectible || isTezosChainSelected ? 'mb-3' : 'mb-1'}
             className="resize-none"
           />
 
           {(forCollectible || isTezosChainSelected) && (
             <>
-              <div className="mt-6 pt-1 pb-2 px-1 flex flex-row justify-between items-center">
+              <div className="pt-1 pb-2 px-1 flex flex-row justify-between items-center">
                 <p className="text-font-description-bold">
                   <T id="tokenId" />
                 </p>
@@ -386,7 +386,7 @@ export const AddTokenForm = memo<AddTokenPageProps>(
                 cleanable={Boolean(tokenIdWithoutFallback) || tokenIdWithoutFallback === '0'}
                 onClean={cleanTokenId}
                 errorCaption={errors.id?.message}
-                containerClassName="mb-6"
+                containerClassName="mb-1"
               />
             </>
           )}

diff --git a/src/app/pages/Settings/reset-extension-modal.tsx b/src/app/pages/Settings/reset-extension-modal.tsx
@@ -57,6 +57,7 @@ export const ResetExtensionModal = memo<ResetExtensionModalProps>(({ onClose })
             labelContainerClassName="text-grey-2"
             placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
             errorCaption={errors.password?.message}
+            reserveSpaceForError={false}
             containerClassName="mb-2"
             testID={SettingsSelectors.passwordInput}
           />

diff --git a/src/app/templates/AccountsManagement/confirm-seed-phrase-access-modal.tsx b/src/app/templates/AccountsManagement/confirm-seed-phrase-access-modal.tsx
@@ -57,6 +57,7 @@ export const ConfirmSeedPhraseAccessModal = memo<ConfirmSeedPhraseAccessModalPro
               placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
               errorCaption={errors.password?.message}
               shouldShowRevealWhenEmpty
+              reserveSpaceForError={false}
               containerClassName="mb-1"
               testID={AccountsManagementSelectors.passwordInput}
             />

diff --git a/src/app/templates/AccountsManagement/delete-wallet-modal.tsx b/src/app/templates/AccountsManagement/delete-wallet-modal.tsx
@@ -96,6 +96,7 @@ export const DeleteWalletModal = memo<DeleteWalletModalProps>(({ onClose, select
               name="password"
               placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
               errorCaption={errors.password?.message}
+              reserveSpaceForError={false}
               containerClassName="mb-1"
               testID={AccountsManagementSelectors.passwordInput}
             />

diff --git a/src/app/templates/AccountsManagement/rename-wallet-modal.tsx b/src/app/templates/AccountsManagement/rename-wallet-modal.tsx
@@ -66,6 +66,7 @@ export const RenameWalletModal = memo<RenameWalletModalProps>(({ onClose, select
             name="name"
             placeholder={selectedGroup.name}
             errorCaption={errors.name?.message}
+            reserveSpaceForError={false}
             containerClassName="mb-1.5"
             cleanable
             onClean={cleanWalletName}

diff --git a/src/app/templates/CreatePasswordForm/index.tsx b/src/app/templates/CreatePasswordForm/index.tsx
@@ -38,7 +38,7 @@ import { T, TID, t } from 'lib/i18n';
 import { putToStorage } from 'lib/storage';
 import { useStorage, useTempleClient } from 'lib/temple/front';
 import { setMnemonicToBackup } from 'lib/temple/front/mnemonic-to-backup-keeper';
-import { SuccessfulImportToastContext } from 'lib/temple/front/successful-import-toast-context';
+import { SuccessfulInitToastContext } from 'lib/temple/front/successful-init-toast-context';
 import { navigate } from 'lib/woozie';
 
 import { createPasswordSelectors } from './selectors';
@@ -68,7 +68,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
   const [, setShouldBackupMnemonic] = useStorage(SHOULD_BACKUP_MNEMONIC_STORAGE_KEY);
   const [bottomEdgeIsVisible, setBottomEdgeIsVisible] = useState(true);
   const { setOnboardingCompleted } = useOnboardingProgress();
-  const [, setShouldShowImportToast] = useContext(SuccessfulImportToastContext);
+  const [, setInitToast] = useContext(SuccessfulInitToastContext);
 
   const dispatch = useDispatch();
 
@@ -128,7 +128,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
           trackEvent('AnalyticsAndAdsEnabled', AnalyticsEventCategory.General, { accountPkh }, data.analytics);
         }
         if (seedPhraseToImport) {
-          setShouldShowImportToast(true);
+          setInitToast(t('importSuccessful'));
         } else {
           await setShouldBackupMnemonic(true);
           setMnemonicToBackup(seedPhrase);
@@ -147,16 +147,16 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
       }
     },
     [
+      setOnboardingCompleted,
+      submitting,
       dispatch,
+      setTermsAccepted,
       registerWallet,
       seedPhrase,
       seedPhraseToImport,
-      setTermsAccepted,
-      setOnboardingCompleted,
-      setShouldBackupMnemonic,
-      setShouldShowImportToast,
-      submitting,
-      trackEvent
+      trackEvent,
+      setInitToast,
+      setShouldBackupMnemonic
     ]
   );
 

diff --git a/src/app/templates/ImportAccountModal/forms/private-key.tsx b/src/app/templates/ImportAccountModal/forms/private-key.tsx
@@ -99,7 +99,7 @@ export const PrivateKeyForm = memo<ImportAccountFormProps>(({ onSuccess }) => {
           errorCaption={errors.privateKey?.message ?? submitError}
           shouldShowErrorCaption
           className="resize-none"
-          containerClassName="mb-8"
+          containerClassName="mb-4"
           cleanable={Boolean(keyValue)}
           onClean={cleanPrivateKeyField}
           onChange={resetSubmitError}

diff --git a/src/app/templates/ManualBackupModal/verify-seed-phrase-input/word-input.tsx b/src/app/templates/ManualBackupModal/verify-seed-phrase-input/word-input.tsx
@@ -26,6 +26,7 @@ export const WordInput = memo<WordInputProps>(({ wordIndex, active, value, testI
         </span>
       </div>
     }
+    reserveSpaceForError={false}
     value={value}
     readOnly
     testID={testID}

diff --git a/src/app/templates/NetworksSettings/add-network-modal/index.tsx b/src/app/templates/NetworksSettings/add-network-modal/index.tsx
@@ -156,14 +156,10 @@ export const AddNetworkModal = memo<AddNetworkModalProps>(({ isOpen, onClose })
     <PageModal opened={isOpen} onRequestClose={closeModal} title={t('addNetwork')}>
       <FormProvider {...formReturn}>
         <form className="flex-1 flex flex-col max-h-full" onSubmit={handleSubmit(onSubmit)}>
-          <ScrollView
-            className="py-4 gap-4"
-            bottomEdgeThreshold={16}
-            onBottomEdgeVisibilityChange={setBottomEdgeIsVisible}
-          >
+          <ScrollView className="py-4" bottomEdgeThreshold={16} onBottomEdgeVisibilityChange={setBottomEdgeIsVisible}>
             <NameInput namesToExclude={namesToExclude} onChainSelect={handleChainSelect} />
 
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-4">
               <UrlInput
                 name="rpcUrl"
                 label="RPC URL"
@@ -226,7 +222,7 @@ export const AddNetworkModal = memo<AddNetworkModalProps>(({ isOpen, onClose })
               />
             </div>
 
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-4">
               <UrlInput
                 disabled={isSubmitting}
                 name="explorerUrl"

diff --git a/src/app/templates/NetworksSettings/add-network-modal/use-add-network.ts b/src/app/templates/NetworksSettings/add-network-modal/use-add-network.ts
@@ -75,7 +75,6 @@ export const useAddNetwork = (
         const commonChainSpecs: Pick<ChainBase, 'name' | 'testnet'> = { name, testnet };
 
         if (signal.aborted) {
-          console.log('aborted addNetwork');
           return;
         }
 

diff --git a/src/app/templates/SeedPhraseInput/SeedWordInput.tsx b/src/app/templates/SeedPhraseInput/SeedWordInput.tsx
@@ -222,6 +222,7 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
         autoComplete="off"
         smallPaddings
         fieldWrapperBottomMargin={false}
+        reserveSpaceForError={false}
         testID={testID}
         onKeyDown={handleInputKeyDown}
       />

diff --git a/src/lib/temple/front/provider.tsx b/src/lib/temple/front/provider.tsx
@@ -7,18 +7,18 @@ import { CustomTezosChainIdContext } from 'lib/analytics';
 import { ReadyTempleProvider } from 'temple/front/ready';
 
 import { TempleClientProvider, useTempleClient } from './client';
-import { SuccessfulImportToastContext } from './successful-import-toast-context';
+import { SuccessfulInitToastContext } from './successful-init-toast-context';
 
 export const TempleProvider: FC<PropsWithChildren> = ({ children }) => {
   usePushNotifications();
-  const importToastState = useState(false);
+  const initToastState = useState<string | undefined>();
 
   return (
     <CustomTezosChainIdContext.Provider value={undefined}>
       <TempleClientProvider>
-        <SuccessfulImportToastContext.Provider value={importToastState}>
+        <SuccessfulInitToastContext.Provider value={initToastState}>
           <ConditionalReadyTemple>{children}</ConditionalReadyTemple>
-        </SuccessfulImportToastContext.Provider>
+        </SuccessfulInitToastContext.Provider>
       </TempleClientProvider>
     </CustomTezosChainIdContext.Provider>
   );

diff --git a/src/lib/temple/front/successful-import-toast-context.ts b/src/lib/temple/front/successful-import-toast-context.ts
diff --git a/src/lib/temple/front/successful-init-toast-context.ts b/src/lib/temple/front/successful-init-toast-context.ts
@@ -0,0 +1,7 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+import { noop } from 'lodash';
+
+type SuccessfulInitToastContextType = [string | undefined, Dispatch<SetStateAction<string | undefined>>];
+
+export const SuccessfulInitToastContext = createContext<SuccessfulInitToastContextType>([undefined, noop]);
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,7 +75,6 @@ export const useAddNetwork = ( @@
             const commonChainSpecs: Pick<ChainBase, 'name' | 'testnet'> = { name, testnet };
             if (signal.aborted) {
-              console.log('aborted addNetwork');
               return;
             }
@@ Expand Down @@