feat: masking secret key functionality while typing and copying key

src/app/pages/onboarding/sign-in/hooks/use-sign-in.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
@@ -24,6 +24,8 @@ async function simulateShortDelayToAvoidImmediateNavigation() {
 
 export function useSignIn() {
   const [error, setError] = useSeedInputErrorState();
+  const [isKeyMasked, setIsKeyMasked] = useState(true);
+  const [sanitizedSecretKey, setSanitizedSecretKey] = useState('');
 
   const { isLoading, setIsLoading, setIsIdle } = useLoading('useSignIn');
   const navigate = useNavigate();
@@ -97,6 +99,33 @@ export function useSignIn() {
     [submitMnemonicForm]
   );
 
+  const onChange = useCallback(
+    (
+      event: ChangeEvent<HTMLInputElement>,
+      handleFormChange: (e: ChangeEvent<HTMLInputElement>) => void
+    ) => {
+      const { value } = event.target;
+      setSanitizedSecretKey(previousSanitizedKey => {
+        // if value is shorter than sanitized secret key, remove characters
+        // from sanitized secret key
+        if (value.length < previousSanitizedKey.length) {
+          const removedChars = previousSanitizedKey.slice(value.length);
+          return previousSanitizedKey.slice(0, -removedChars.length);
+        } else {
+          // append new characters if value is longer than sanitized secret key
+          const newChars = value.slice(previousSanitizedKey.length);
+          return previousSanitizedKey + newChars;
+        }
+      });
+      handleFormChange(event);
+    },
+    []
+  );
+
+  const toggleKeyMask = useCallback(() => {
+    setIsKeyMasked(prev => !prev);
+  }, []);
+
   useEffect(
     () => () => {
       setError(undefined);
@@ -107,5 +136,15 @@ export function useSignIn() {
     [setError]
   );
 
-  return { onPaste, submitMnemonicForm, ref: textAreaRef, error, isLoading };
+  return {
+    onPaste,
+    submitMnemonicForm,
+    ref: textAreaRef,
+    error,
+    isLoading,
+    onChange,
+    toggleKeyMask,
+    isKeyMasked,
+    sanitizedSecretKey,
+  };
 }

src/app/pages/onboarding/sign-in/sign-in.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ChangeEvent } from 'react';
 import { FiEye, FiEyeOff } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 
@@ -24,9 +24,18 @@ import { Title } from '@app/components/typography';
 import { useSignIn } from '@app/pages/onboarding/sign-in/hooks/use-sign-in';
 
 export function SignIn() {
-  const { onPaste, submitMnemonicForm, error, isLoading, ref } = useSignIn();
+  const {
+    onPaste,
+    submitMnemonicForm,
+    error,
+    isLoading,
+    ref,
+    onChange,
+    toggleKeyMask,
+    isKeyMasked,
+    sanitizedSecretKey,
+  } = useSignIn();
   const navigate = useNavigate();
-  const [isKeyMasked, setIsKeyMasked] = useState(true);
 
   const [desktopViewport] = useMediaQuery(`(min-width: ${DESKTOP_VIEWPORT_MIN_WIDTH})`);
 
@@ -36,7 +45,7 @@ export function SignIn() {
     <CenteredPageContainer>
       <Formik
         initialValues={{ secretKey: '' }}
-        onSubmit={values => submitMnemonicForm(values.secretKey)}
+        onSubmit={_values => submitMnemonicForm(sanitizedSecretKey)}
       >
         {form => (
           <Form>
@@ -69,7 +78,9 @@ export function SignIn() {
                   borderRadius="10px"
                   fontSize="16px"
                   minHeight="168px"
-                  onChange={form.handleChange}
+                  onChange={event => {
+                    onChange(event as ChangeEvent<HTMLInputElement>, form.handleChange);
+                  }}
                   onKeyDown={e => e.key === 'Enter' && form.submitForm()}
                   onPaste={onPaste}
                   placeholder="Paste or type your Secret Key"
@@ -77,9 +88,7 @@ export function SignIn() {
                   spellCheck={false}
                   style={{ resize: 'none' }}
                   value={
-                    isKeyMasked
-                      ? form.values.secretKey.replace(/[^ ]/g, '*')
-                      : form.values.secretKey
+                    isKeyMasked ? form.values.secretKey.replace(/[^ ]/g, '*') : sanitizedSecretKey
                   }
                   width="100%"
                 />
@@ -98,11 +107,7 @@ export function SignIn() {
                   </ErrorLabel>
                 )}
                 <Stack alignItems="center">
-                  <Link
-                    fontSize="14px"
-                    _hover={{ textDecoration: 'none' }}
-                    onClick={() => setIsKeyMasked(!isKeyMasked)}
-                  >
+                  <Link fontSize="14px" _hover={{ textDecoration: 'none' }} onClick={toggleKeyMask}>
                     <Stack alignItems="center" isInline spacing="tight">
                       {isKeyMasked ? <FiEye /> : <FiEyeOff />}
                       <Text>{isKeyMasked ? 'Show' : 'Hide'} Secret Key</Text>