diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx index a23b812e..582da25c 100644 --- a/src/app/pages/onboarding/sign-in/sign-in.tsx +++ b/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() { )} + + setIsKeyMasked(!isKeyMasked)} + > + + {isKeyMasked ? : } + {isKeyMasked ? 'Show' : 'Hide'} Secret Key + + +