Fix "You enabled a recovery phrase" displayed for recovery device (#1737

)

* fix: "You enabled a recovery phrase" for device

* chore: format

src/frontend/src/flows/manage/recoveryMethodsSection.json

@@ -0,0 +1,6 @@
+{
+  "en": {
+    "recovery_phrase_enabled": "You enabled a recovery phrase.",
+    "recovery_key_enabled": "You enabled a recovery device."
+  }
+}

src/frontend/src/flows/manage/recoveryMethodsSection.ts

@@ -4,6 +4,7 @@ import {
   warningIcon,
   warningRoundIcon,
 } from "$src/components/icons";
+import { DynamicKey, I18n } from "$src/i18n";
 import {
   recoveryKeyLabel,
   recoveryPhraseLabel,
@@ -13,6 +14,8 @@ import { html, TemplateResult } from "lit-html";
 import { settingsDropdown } from "./settingsDropdown";
 import { Devices, RecoveryKey, RecoveryPhrase } from "./types";
 
+import copyJson from "./recoveryMethodsSection.json";
+
 // The list of recovery devices
 export const recoveryMethodsSection = ({
   recoveries: { recoveryPhrase, recoveryKey },
@@ -32,10 +35,10 @@ export const recoveryMethodsSection = ({
         <ul>
           ${isNullish(recoveryPhrase)
             ? missingRecovery({ recovery: "phrase", addRecoveryPhrase })
-            : recoveryPhraseItem({ recoveryPhrase })}
+            : recoveryPhraseItem({ recoveryPhrase, i18n: new I18n() })}
           ${isNullish(recoveryKey)
             ? missingRecovery({ recovery: "key", addRecoveryKey })
-            : recoveryKeyItem({ recoveryKey })}
+            : recoveryKeyItem({ recoveryKey, i18n: new I18n() })}
         </ul>
       </div>
     </aside>
@@ -98,8 +101,10 @@ export const missingRecovery = (
 // List a recovery phrase
 export const recoveryPhraseItem = ({
   recoveryPhrase,
+  i18n,
 }: {
   recoveryPhrase: RecoveryPhrase;
+  i18n: I18n;
 }) => {
   const alias = recoveryPhraseLabel;
   const id = "recovery-phrase";
@@ -117,9 +122,12 @@ export const recoveryPhraseItem = ({
           fn: () => recoveryPhrase.protect(),
         },
   ];
+
+  const { recovery_phrase_enabled } = i18n.i18n(copyJson);
+
   return html`
     <li class="c-action-list__item" data-device=${alias}>
-      ${checkmark()}
+      ${checkmark(recovery_phrase_enabled)}
       <div class="c-action-list__label">${alias}</div>
       ${recoveryPhrase.isProtected ? lock() : undefined}
       ${settingsDropdown({ alias, id, settings })}
@@ -140,31 +148,34 @@ const lock = (): TemplateResult => {
 // List a recovery key (non-phrase recovery device)
 export const recoveryKeyItem = ({
   recoveryKey,
+  i18n,
 }: {
   recoveryKey: RecoveryKey;
+  i18n: I18n;
 }) => {
   const alias = recoveryKeyLabel;
   const id = "recovery-key";
   const settings = [
     { action: "remove", caption: "Remove", fn: () => recoveryKey.remove() },
   ];
+
+  const { recovery_key_enabled } = i18n.i18n(copyJson);
+
   return html`
     <li class="c-action-list__item" data-device=${alias}>
-      ${checkmark()}
+      ${checkmark(recovery_key_enabled)}
       <div class="c-action-list__label">${alias}</div>
       ${settingsDropdown({ alias, id, settings })}
     </li>
   `;
 };
 
-const checkmark = (): TemplateResult => {
+const checkmark = (label: DynamicKey | string): TemplateResult => {
   return html`
     <div class="c-action-list__status">
       <span class="c-icon c-icon--ok c-tooltip"
         >${checkmarkRoundIcon}
-        <span class="c-tooltip__message c-card c-card--tight"
-          >You enabled a recovery phrase.</span
-        >
+        <span class="c-tooltip__message c-card c-card--tight">${label}</span>
       </span>
     </div>
   `;