From ade15d3c60d50ae4bbbf0adc7ac5b73d5cdbff18 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Tue, 13 Sep 2022 14:53:04 +0200
Subject: [PATCH 1/3] change mnemonic textfield

---
 nym-wallet/src/components/textfields.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index c19d9db638..f8ff814bc8 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Box, IconButton, Stack, TextField } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
 import { Error } from './Error';
 
 export const MnemonicInput: React.FC<{
@@ -17,16 +19,22 @@ export const MnemonicInput: React.FC<{
         value={mnemonic}
         onChange={(e) => onUpdateMnemonic(e.target.value)}
         multiline={!!showPassword}
-        rows={4}
         autoFocus
         fullWidth
-        InputProps={{
-          endAdornment: (
-            <IconButton onClick={() => setShowPassword((show) => !show)}>
-              {showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          ),
+        inputProps={{
+          style: {
+            height: '160px',
+          },
         }}
+        sx={{
+          'input::-webkit-textfield-decoration-container': {
+            alignItems: 'start',
+          },
+        }}
+      />
+      <FormControlLabel
+        control={<Checkbox checked={Boolean(showPassword)} onChange={() => setShowPassword((show) => !show)} />}
+        label="Reveal my mnemonic"
       />
       {error && <Error message={error} />}
     </Stack>

From 8924f9642f783245e8183244feef136bd6e2616e Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 14 Sep 2022 11:35:22 +0200
Subject: [PATCH 2/3] wip

---
 nym-wallet/src/components/textfields.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index f8ff814bc8..34df91174d 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -5,6 +5,8 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { Error } from './Error';
 
+const searchRegExp = /\s/g;
+
 export const MnemonicInput: React.FC<{
   mnemonic: string;
   error?: string;
@@ -15,8 +17,8 @@ export const MnemonicInput: React.FC<{
     <Stack spacing={2}>
       <TextField
         label="Mnemonic"
-        type={showPassword ? 'input' : 'password'}
-        value={mnemonic}
+        type={'input'}
+        value={showPassword ? mnemonic : mnemonic.replace(searchRegExp, '*')}
         onChange={(e) => onUpdateMnemonic(e.target.value)}
         multiline={!!showPassword}
         autoFocus

From 27d566dd477a0d052997ea7a3b18265772a1a50b Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 14 Sep 2022 11:46:06 +0200
Subject: [PATCH 3/3] some styling

---
 nym-wallet/src/components/textfields.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index 34df91174d..c4373176f3 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -5,8 +5,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { Error } from './Error';
 
-const searchRegExp = /\s/g;
-
 export const MnemonicInput: React.FC<{
   mnemonic: string;
   error?: string;
@@ -17,10 +15,10 @@ export const MnemonicInput: React.FC<{
     <Stack spacing={2}>
       <TextField
         label="Mnemonic"
-        type={'input'}
-        value={showPassword ? mnemonic : mnemonic.replace(searchRegExp, '*')}
+        type="input"
+        value={showPassword ? mnemonic : mnemonic.replaceAll(/./g, '*')}
         onChange={(e) => onUpdateMnemonic(e.target.value)}
-        multiline={!!showPassword}
+        multiline
         autoFocus
         fullWidth
         inputProps={{