add 24 word mnemonic phrase to recover-account

extension/package.json

@@ -22,7 +22,7 @@
     "@shared/api": "1.0.0",
     "@shared/constants": "1.0.0",
     "@shared/helpers": "1.0.0",
-    "@stellar/design-system": "^1.0.1",
+    "@stellar/design-system": "^1.1.1",
     "@stellar/wallet-sdk": "v0.11.0-beta.1",
     "@testing-library/react": "^10.4.8",
     "@testing-library/user-event": "^7.1.2",

extension/src/popup/components/AutoSave/styles.scss

@@ -6,7 +6,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    transition: opacity var(--anim-transition-default);
+    transition: opacity var(--dropdown-animation);
 
     &--failed {
       opacity: 1;

extension/src/popup/views/RecoverAccount/index.tsx

@@ -2,7 +2,14 @@ import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Field, Form, Formik, FieldProps } from "formik";
 import { object as YupObject } from "yup";
-import { Input, Checkbox, Icon, Link, Button } from "@stellar/design-system";
+import {
+  Input,
+  Checkbox,
+  Icon,
+  Link,
+  Button,
+  Toggle,
+} from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -35,16 +42,23 @@ interface PhraseInputProps {
   phraseInput: string;
   index: number;
   handleMnemonicInputChange: (value: string, index: number) => void;
+  isTextShowing: boolean;
+  isLongPhrase: boolean;
 }
 
 const PhraseInput = ({
   phraseInput,
   index,
   handleMnemonicInputChange,
+  isTextShowing,
+  isLongPhrase,
 }: PhraseInputProps) => {
-  const [isTextShowing, setIsTextShowing] = useState(false);
   const [inputValue, setInputValue] = useState("");
 
+  useEffect(() => {
+    setInputValue("");
+  }, [isLongPhrase]);
+
   return (
     <div key={phraseInput} className="RecoverAccount__phrase-input">
       <Input
@@ -61,16 +75,13 @@ const PhraseInput = ({
         type={isTextShowing ? "text" : "password"}
         value={inputValue}
       />
-      <div
-        className="RecoverAccount__password-toggle"
-        onClick={() => setIsTextShowing(!isTextShowing)}
-      >
-        {isTextShowing ? <Icon.Show /> : <Icon.Hide />}
-      </div>
     </div>
   );
 };
 
+const SHORT_PHRASE = 12;
+const LONG_PHRASE = 24;
+
 const buildMnemonicPhrase = (mnemonicPhraseArr: string[]) =>
   mnemonicPhraseArr.join(" ").trim();
 
@@ -98,7 +109,8 @@ export const RecoverAccount = () => {
   });
 
   const dispatch = useDispatch();
-  const PHRASE_LENGTH = 12;
+  const [isLongPhrase, setIsLongPhrase] = useState(false);
+  const [isTextShowing, setIsTextShowing] = useState(false);
   const [phraseInputs, setPhraseInputs] = useState([] as string[]);
   const [mnemonicPhraseArr, setMnemonicPhraseArr] = useState([] as string[]);
 
@@ -120,14 +132,21 @@ export const RecoverAccount = () => {
   }, [publicKey]);
 
   useEffect(() => {
-    const phraseInputsArr = [];
+    const phraseInputsArr: string[] = [];
+    let PHRASE_LENGTH = SHORT_PHRASE;
 
-    // eslint-disable-next-line no-plusplus
-    for (let i = 1; i <= PHRASE_LENGTH; i++) {
-      phraseInputsArr.push(`MnemonicPhrase-${i}`);
-    }
-    setPhraseInputs(phraseInputsArr);
-  }, [PHRASE_LENGTH]);
+    // delay to account for css transition
+    setTimeout(() => {
+      PHRASE_LENGTH = isLongPhrase ? LONG_PHRASE : SHORT_PHRASE;
+
+      // eslint-disable-next-line no-plusplus
+      for (let i = 1; i <= PHRASE_LENGTH; i++) {
+        phraseInputsArr.push(`MnemonicPhrase-${i}`);
+      }
+      setPhraseInputs(phraseInputsArr);
+      setMnemonicPhraseArr([]);
+    }, 150);
+  }, [isLongPhrase]);
 
   const handleMnemonicInputChange = (value: string, i: number) => {
     const arr = [...mnemonicPhraseArr];
@@ -159,17 +178,51 @@ export const RecoverAccount = () => {
 
                 <OnboardingTwoCol>
                   <OnboardingOneCol>
-                    <div className="RecoverAccount__mnemonic-input">
-                      {phraseInputs.map((phraseInput, i) => (
-                        <PhraseInput
-                          key={phraseInput}
-                          phraseInput={phraseInput}
-                          handleMnemonicInputChange={handleMnemonicInputChange}
-                          index={i}
-                        />
-                      ))}
+                    <div>
+                      <div
+                        className={`RecoverAccount__mnemonic-input ${
+                          isLongPhrase
+                            ? "RecoverAccount__mnemonic-input--long-phrase"
+                            : ""
+                        }`}
+                      >
+                        {phraseInputs.map((phraseInput, i) => (
+                          <PhraseInput
+                            key={phraseInput}
+                            phraseInput={phraseInput}
+                            handleMnemonicInputChange={
+                              handleMnemonicInputChange
+                            }
+                            isTextShowing={isTextShowing}
+                            isLongPhrase={isLongPhrase}
+                            index={i}
+                          />
+                        ))}
+                      </div>
+                      {authError ? <FormError>{authError}</FormError> : <></>}
+                      <div className="RecoverAccount__mnemonic-footer">
+                        <div className="RecoverAccount__phrase-toggle">
+                          <div>{SHORT_PHRASE} word</div>
+                          <Toggle
+                            checked={isLongPhrase}
+                            id="RecoverAccount__toggle"
+                            onChange={() => setIsLongPhrase(!isLongPhrase)}
+                          />
+                          <div>{LONG_PHRASE} word</div>
+                        </div>
+                        <div className="RecoverAccount__mnemonic__text-toggle">
+                          <Button
+                            variant="secondary"
+                            onClick={() => setIsTextShowing(!isTextShowing)}
+                            size="xs"
+                            type="button"
+                          >
+                            <span> {isTextShowing ? "Hide" : "Show"}</span>
+                            {isTextShowing ? <Icon.Hide /> : <Icon.Show />}
+                          </Button>
+                        </div>
+                      </div>
                     </div>
-                    {authError ? <FormError>{authError}</FormError> : <></>}
                   </OnboardingOneCol>
 
                   <OnboardingOneCol>

extension/src/popup/views/RecoverAccount/styles.scss

@@ -44,21 +44,46 @@
   &__mnemonic-input {
     display: flex;
     flex-wrap: wrap;
-    gap: 1.5rem;
+    gap: 0.5rem;
     margin-bottom: 0.25rem;
+    max-height: 23.25rem;
+    overflow: hidden;
+    transition: max-height var(--dropdown-animation);
     width: 24rem;
+
+    &--long-phrase {
+      max-height: 48rem;
+    }
   }
 
   &__phrase-input {
     align-items: center;
     display: flex;
     gap: 0.5rem;
-    width: 11rem;
+    width: 11.6875rem;
+  }
+
+  &__phrase-toggle {
+    align-items: center;
+    display: flex;
+    font-size: 0.875rem;
+    gap: 0.75rem;
   }
 
-  &__password-toggle {
+  &__mnemonic-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+  }
+
+  &__text-toggle {
+    align-items: center;
     cursor: pointer;
     display: flex;
-    width: 1rem;
+
+    span {
+      color: var(--color-white);
+      font-size: 0.875rem;
+    }
   }
 }