TW-1449 Import wallet flow

public/_locales/de/messages.json

@@ -1056,7 +1056,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "z. B. m/44'/1729'/..."
+    "message": "z. B. $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "Halten Sie ihn geheim."

public/_locales/en/messages.json

@@ -302,12 +302,7 @@
     "message": "Anonymous analytics"
   },
   "analyticsInputDescription": {
-    "message": "By pressing this button you are agreeing to the $analyticsLink$",
-    "placeholders": {
-      "analyticsLink": {
-        "content": "$1"
-      }
-    }
+    "message": "By enabling this checkbox, you help Temple improve products and services by allowing analytics of usage data."
   },
   "copiedTokenAddress": {
     "message": "Copied"
@@ -1569,7 +1564,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "e.g. m/44'/1729'/..."
+    "message": "e.g. $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "Keep it in secret."

public/_locales/en_GB/messages.json

@@ -1033,7 +1033,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "e.g. m/44'/1729'/..."
+    "message": "e.g. $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "Keep it in secret."

public/_locales/fr/messages.json

@@ -996,7 +996,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "p. ex. m/44'/1729'/…"
+    "message": "p. ex. $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "Gardez-la secrète."

public/_locales/ja/messages.json

@@ -983,7 +983,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "例: m/44'/1729'/..."
+    "message": "例: $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "秘密にしてください。"

public/_locales/ko/messages.json

@@ -983,7 +983,12 @@
     "message": "m/44'/1729'/<계정 지수>'/0'"
   },
   "derivationPathExample2": {
-    "message": "예) m/44'/1729'/..."
+    "message": "예) $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "보안을 유지하세요."

public/_locales/pt/messages.json

@@ -1056,7 +1056,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "por exemplo, m/44'/1729'/..."
+    "message": "por exemplo, $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "Mantenha-a em segredo."

public/_locales/tr/messages.json

@@ -1056,7 +1056,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "ör. m/44'/1729'/..."
+    "message": "ör. $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "Kimseyle paylaşmayın."

public/_locales/uk/messages.json

@@ -1034,7 +1034,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "e.g. m/44'/1729'/..."
+    "message": "наприклад, $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "Зберігайте в таємниці."

public/_locales/zh_CN/messages.json

@@ -987,7 +987,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "例如：m/44'/1729'/…"
+    "message": "例如：$derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "请保密。"

public/_locales/zh_TW/messages.json

@@ -987,7 +987,12 @@
     "message": "m/44'/1729'/<account_index>'/0'"
   },
   "derivationPathExample2": {
-    "message": "例如 m/44'/1729'/…"
+    "message": "例如 $derivationPath$",
+    "placeholders": {
+      "derivationPath": {
+        "content": "$1"
+      }
+    }
   },
   "keepSeedPhraseSecret": {
     "message": "請小心保管。"

src/app/atoms/SettingsCheckbox.tsx

@@ -1,6 +1,6 @@
-import React, { memo, ReactNode, useCallback, useEffect, useMemo } from 'react';
+import React, { memo, ReactNode, useCallback } from 'react';
 
-import { createRoot } from 'react-dom/client';
+import clsx from 'clsx';
 
 import { useRichFormatTooltip } from 'app/hooks/use-rich-format-tooltip';
 import { ReactComponent as InfoFillIcon } from 'app/icons/base/InfoFill.svg';
@@ -24,7 +24,7 @@ const basicTooltipProps = {
 
 const tooltipWrapperFactory = () => {
   const element = document.createElement('div');
-  element.className = 'max-w-48';
+  element.className = 'max-w-52';
 
   return element;
 };
@@ -33,31 +33,6 @@ export const SettingsCheckbox = memo<SettingsCheckboxProps>(
   ({ label, tooltip, testID, testIDProperties, onChange, ...restProps }) => {
     const { trackEvent } = useAnalytics();
 
-    const tippyProps = useMemo(() => {
-      let content: HTMLDivElement | undefined;
-
-      if (tooltip) {
-        content = document.createElement('div');
-        content.className = 'max-w-48';
-      }
-
-      return {
-        trigger: 'mouseenter',
-        hideOnClick: false,
-        interactive: true,
-        content,
-        placement: 'bottom-end' as const,
-        animation: 'shift-away-subtle'
-      };
-    }, [tooltip]);
-
-    useEffect(() => {
-      if (tippyProps.content && tooltip) {
-        const root = createRoot(tippyProps.content);
-        root.render(tooltip);
-      }
-    }, [tippyProps.content, tooltip]);
-
     const infoIconWrapperRef = useRichFormatTooltip<HTMLDivElement>(basicTooltipProps, tooltipWrapperFactory, tooltip);
 
     const handleChange = useCallback(
@@ -70,7 +45,12 @@ export const SettingsCheckbox = memo<SettingsCheckboxProps>(
     );
 
     return (
-      <div className="flex items-center p-3 rounded-lg bg-white shadow-bottom gap-2 border-0.5 border-transparent hover:border-lines">
+      <div
+        className={clsx(
+          'flex items-center p-3 rounded-lg bg-white shadow-bottom',
+          'gap-2 border-0.5 border-transparent hover:border-lines'
+        )}
+      >
         <label className="flex-1 flex items-center gap-2" {...setTestID(testID)}>
           <CheckboxV2 onChange={handleChange} {...restProps} />
           <span className="text-font-medium-bold">{label}</span>

src/app/pages/ConnectLedger/ConnectLedger.tsx

@@ -230,7 +230,7 @@ const ConnectLedger: FC = () => {
                 name="customDerivationPath"
                 id="importacc-cdp"
                 label={t('customDerivationPath')}
-                placeholder={t('derivationPathExample2')}
+                placeholder={t('derivationPathExample2', DEFAULT_TEZOS_DERIVATION_PATH)}
                 errorCaption={errors.customDerivationPath?.message}
                 containerClassName="mb-6"
                 testID={ConnectLedgerSelectors.customDerivationPathInput}

src/app/templates/About/About.tsx

@@ -4,6 +4,7 @@ import { Anchor } from 'app/atoms/Anchor';
 import { DonationBanner } from 'app/atoms/DonationBanner/DonationBanner';
 import { Logo } from 'app/atoms/Logo';
 import SubTitle from 'app/atoms/SubTitle';
+import { PRIVACY_POLICY_URL, TERMS_OF_USE_URL } from 'lib/constants';
 import { EnvVars } from 'lib/env';
 import { TID, T } from 'lib/i18n';
 
@@ -26,12 +27,12 @@ const LINKS: {
   },
   {
     key: 'privacyPolicy',
-    link: 'https://templewallet.com/privacy',
+    link: PRIVACY_POLICY_URL,
     testID: AboutSelectors.privacyPolicyLink
   },
   {
     key: 'termsOfUse',
-    link: 'https://templewallet.com/terms',
+    link: TERMS_OF_USE_URL,
     testID: AboutSelectors.termsOfUseLink
   },
   {

src/app/templates/AccountsManagement/index.tsx

@@ -170,12 +170,7 @@ export const AccountsManagement = memo<AccountsManagementProps>(({ setHeaderChil
         );
       case AccountsManagementModal.WatchOnly:
         return (
-          <ImportAccountModal
-            optionSlug="watch-only"
-            shouldShowBackButton
-            onGoBack={handleModalClose}
-            onRequestClose={handleModalClose}
-          />
+          <ImportAccountModal optionSlug="watch-only" onGoBack={handleModalClose} onRequestClose={handleModalClose} />
         );
       default:
         return null;

src/app/templates/AppHeader/AccountsModal.tsx

@@ -99,14 +99,7 @@ export const AccountsModal = memo<Props>(({ opened, onRequestClose }) => {
           />
         );
       case AccountsModalSubmodals.WatchOnly:
-        return (
-          <ImportAccountModal
-            optionSlug="watch-only"
-            shouldShowBackButton
-            onGoBack={closeSubmodal}
-            onRequestClose={closeSubmodal}
-          />
-        );
+        return <ImportAccountModal optionSlug="watch-only" onGoBack={closeSubmodal} onRequestClose={closeSubmodal} />;
       default:
         return null;
     }

src/app/templates/CreatePasswordForm/index.tsx

@@ -16,15 +16,19 @@ import { togglePartnersPromotionAction } from 'app/store/partners-promotion/acti
 import { setIsAnalyticsEnabledAction, setOnRampPossibilityAction } from 'app/store/settings/actions';
 import { toastError } from 'app/toaster';
 import { AnalyticsEventCategory, useAnalytics } from 'lib/analytics';
-import { SHOULD_BACKUP_MNEMONIC_STORAGE_KEY, WEBSITES_ANALYTICS_ENABLED } from 'lib/constants';
+import {
+  PRIVACY_POLICY_URL,
+  SHOULD_BACKUP_MNEMONIC_STORAGE_KEY,
+  TERMS_OF_USE_URL,
+  WEBSITES_ANALYTICS_ENABLED
+} from 'lib/constants';
 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 { navigate } from 'lib/woozie';
 
-import { TEMPLE_ANALYTICS_LINK, TEMPLE_PRIVACY_POLICY_LINK, TEMPLE_TERMS_LINK } from './config';
 import { createPasswordSelectors } from './selectors';
 
 interface FormData {
@@ -56,7 +60,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
 
   const dispatch = useDispatch();
 
-  const { control, watch, register, handleSubmit, errors, triggerValidation, formState } = useForm<FormData>({
+  const { control, watch, register, handleSubmit, errors, triggerValidation, formState, setValue } = useForm<FormData>({
     defaultValues: {
       analytics: true,
       getRewards: true
@@ -129,6 +133,9 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
     ]
   );
 
+  const cleanPassword = useCallback(async () => setValue('password', '', true), [setValue]);
+  const cleanRepeatPassword = useCallback(async () => setValue('repeatPassword', '', true), [setValue]);
+
   const submitButtonNameI18nKey = seedPhraseToImport ? 'importWallet' : 'createWallet';
   const submitButtonTestID = seedPhraseToImport
     ? createPasswordSelectors.importButton
@@ -158,6 +165,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
             containerClassName="mb-2"
             shouldShowRevealWhenEmpty
             testID={createPasswordSelectors.passwordField}
+            onClean={cleanPassword}
           />
           <div className="flex flex-wrap gap-1">
             {validationsLabelsInputs.map(({ textI18nKey, key }) => (
@@ -185,6 +193,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
             containerClassName="my-4"
             shouldShowRevealWhenEmpty
             testID={createPasswordSelectors.repeatPasswordField}
+            onClean={cleanRepeatPassword}
           />
         </div>
         <div className="w-full flex flex-col gap-3">
@@ -193,22 +202,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
             name="analytics"
             as={SettingsCheckbox}
             label={<T id="usageAnalytics" />}
-            tooltip={
-              <T
-                id="analyticsInputDescription"
-                substitutions={[
-                  <a
-                    href={TEMPLE_ANALYTICS_LINK}
-                    key="analyticsLink"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline text-secondary font-semibold"
-                  >
-                    <T id="analyticsCollecting" />
-                  </a>
-                ]}
-              />
-            }
+            tooltip={<T id="analyticsInputDescription" />}
             testID={createPasswordSelectors.analyticsCheckBox}
           />
 
@@ -229,7 +223,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
                 <T id={submitButtonNameI18nKey} />
               </span>,
               <a
-                href={TEMPLE_TERMS_LINK}
+                href={TERMS_OF_USE_URL}
                 key="termsLink"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -238,7 +232,7 @@ export const CreatePasswordForm = memo<CreatePasswordFormProps>(({ seedPhrase: s
                 <T id="termsOfUsage" />
               </a>,
               <a
-                href={TEMPLE_PRIVACY_POLICY_LINK}
+                href={PRIVACY_POLICY_URL}
                 key="privacyPolicyLink"
                 target="_blank"
                 rel="noopener noreferrer"