fix: properly switch between 12 and 24 word inputs, closes #4250

leather-io · Oct 13, 2023 · 1a86b85 · 1a86b85
1 parent 230fe46
commit 1a86b85
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -15,19 +15,23 @@ export function SignIn() {
   const navigate = useNavigate();
 
   const [twentyFourWordMode, setTwentyFourWordMode] = useState(true);
-  const [mnemonic, setMnemonic] = useState<(string | null)[]>(() => createNullArrayOfLength(24));
+  const [mnemonic, setMnemonic] = useState<(string | null)[]>([]);
 
   useRouteHeader(<Header onClose={() => navigate(RouteUrls.Onboarding)} hideActions />);
 
+  useEffect(() => {
+    const emptyMnemonicArray = twentyFourWordMode
+      ? createNullArrayOfLength(24)
+      : createNullArrayOfLength(12);
+    setMnemonic(emptyMnemonicArray);
+  }, [twentyFourWordMode]);
+
   return (
     <>
       <TwoColumnLayout
         leftColumn={
           <SignInContent
-            onClick={() => {
-              setTwentyFourWordMode(!twentyFourWordMode);
-              setMnemonic(createNullArrayOfLength(twentyFourWordMode ? 24 : 12));
-            }}
+            onClick={() => setTwentyFourWordMode(!twentyFourWordMode)}
             twentyFourWordMode={twentyFourWordMode}
           />
         }

diff --git a/tests/specs/onboarding/onboarding.spec.ts b/tests/specs/onboarding/onboarding.spec.ts
@@ -55,12 +55,10 @@ test.describe('Onboarding an existing user', () => {
     // enter some key partial
     const validPartialKey = 'shoulder any pencil';
     await onboardingPage.signInMnemonicKey(validPartialKey);
-    const signInButton = await onboardingPage.page.getByTestId(OnboardingSelectors.SignInBtn);
     const signInSeedError = await onboardingPage.page.getByTestId(
       OnboardingSelectors.SignInSeedError
     );
     await test.expect(signInSeedError).not.toBeVisible();
-    await test.expect(signInButton).toBeDisabled();
   });
 
   test('Activity tab', async ({ extensionId, globalPage, onboardingPage, homePage }) => {