refactor: mask secret key during sign in

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

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 
 import YourSecretKey from '@assets/images/onboarding/your-secret-key.png';
@@ -15,6 +17,7 @@ import {
   DESKTOP_VIEWPORT_MIN_WIDTH,
 } from '@app/components/global-styles/full-page-styles';
 import { Header } from '@app/components/header';
+import { Link } from '@app/components/link';
 import { PageTitle } from '@app/components/page-title';
 import { PrimaryButton } from '@app/components/primary-button';
 import { Title } from '@app/components/typography';
@@ -23,6 +26,7 @@ import { useSignIn } from '@app/pages/onboarding/sign-in/hooks/use-sign-in';
 export function SignIn() {
   const { onPaste, submitMnemonicForm, error, isLoading, ref } = useSignIn();
   const navigate = useNavigate();
+  const [isKeyMasked, setIsKeyMasked] = useState(true);
 
   const [desktopViewport] = useMediaQuery(`(min-width: ${DESKTOP_VIEWPORT_MIN_WIDTH})`);
 
@@ -72,7 +76,11 @@ export function SignIn() {
                   ref={ref as any}
                   spellCheck={false}
                   style={{ resize: 'none' }}
-                  value={form.values.secretKey}
+                  value={
+                    isKeyMasked
+                      ? form.values.secretKey.replace(/[^ ]/g, '*')
+                      : form.values.secretKey
+                  }
                   width="100%"
                 />
                 {error && (
@@ -89,6 +97,18 @@ export function SignIn() {
                     </Text>
                   </ErrorLabel>
                 )}
+                <Stack alignItems="center">
+                  <Link
+                    fontSize="14px"
+                    _hover={{ textDecoration: 'none' }}
+                    onClick={() => setIsKeyMasked(!isKeyMasked)}
+                  >
+                    <Stack alignItems="center" isInline spacing="tight">
+                      {isKeyMasked ? <FiEye /> : <FiEyeOff />}
+                      <Text>{isKeyMasked ? 'Show' : 'Hide'} Secret Key</Text>
+                    </Stack>
+                  </Link>
+                </Stack>
               </Stack>
               <PrimaryButton
                 data-testid={OnboardingSelectors.SignInBtn}