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
+
+
+