ui tweaks

nym-wallet/src/pages/welcome/components/textfields.tsx

@@ -7,19 +7,30 @@ export const MnemonicInput: React.FC<{
   mnemonic: string;
   error?: string;
   onUpdateMnemonic: (mnemonic: string) => void;
-}> = ({ mnemonic, error, onUpdateMnemonic }) => (
-  <Stack spacing={2}>
-    <TextField
-      placeholder="Mnemonic"
-      value={mnemonic}
-      onChange={(e) => onUpdateMnemonic(e.target.value)}
-      multiline
-      rows={5}
-      fullWidth
-    />
-    {error && <Error message={error} />}
-  </Stack>
-);
+}> = ({ mnemonic, error, onUpdateMnemonic }) => {
+  const [showPassword, setShowPassword] = useState(false);
+  return (
+    <Stack spacing={2}>
+      <TextField
+        placeholder="Mnemonic"
+        type={showPassword ? 'input' : 'password'}
+        value={mnemonic}
+        onChange={(e) => onUpdateMnemonic(e.target.value)}
+        multiline={!!showPassword}
+        rows={4}
+        fullWidth
+        InputProps={{
+          endAdornment: (
+            <IconButton onClick={() => setShowPassword((show) => !show)}>
+              {showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          ),
+        }}
+      />
+      {error && <Error message={error} />}
+    </Stack>
+  );
+};
 
 export const PasswordInput: React.FC<{
   password: string;

nym-wallet/src/pages/welcome/components/word-tiles.tsx

@@ -7,17 +7,19 @@ export const WordTile = ({
   index,
   disabled,
   onClick,
+  button,
 }: {
   mnemonicWord: string;
   index?: number;
   disabled?: boolean;
   onClick?: boolean;
+  button?: boolean;
 }) => (
   <Card
     variant="outlined"
     sx={{
-      background: '#151A2C',
-      border: '1px solid #3A4053',
+      background: button ? '#151A2C' : 'transparent',
+      border: button ? '1px solid #3A4053' : 'none',
       cursor: onClick ? 'pointer' : 'default',
       opacity: disabled ? 0.2 : 1,
     }}
@@ -40,10 +42,12 @@ export const WordTiles = ({
   mnemonicWords,
   showIndex,
   onClick,
+  buttons,
 }: {
   mnemonicWords?: TMnemonicWords;
   showIndex?: boolean;
   onClick?: ({ name, index }: { name: string; index: number }) => void;
+  buttons?: boolean;
 }) => {
   if (mnemonicWords) {
     return (
@@ -55,6 +59,7 @@ export const WordTiles = ({
               index={showIndex ? index : undefined}
               onClick={!!onClick}
               disabled={disabled}
+              button={buttons}
             />
           </Grid>
         ))}

nym-wallet/src/pages/welcome/pages/verify-mnemonic.tsx

@@ -1,34 +1,18 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, CircularProgress, Stack } from '@mui/material';
-import { useSnackbar } from 'notistack';
+import { Button, Stack } from '@mui/material';
 import { HiddenWords, Subtitle, Title, WordTiles } from '../components';
 import { THiddenMnemonicWord, THiddenMnemonicWords, TMnemonicWord, TMnemonicWords, TPages } from '../types';
 import { randomNumberBetween } from '../../../utils';
 import { SignInContext } from '../context';
-import { createPassword } from '../../../requests';
 
 const numberOfRandomWords = 6;
 
-export const VerifyMnemonic = ({ page, onNext, onPrev }: { page: TPages; onNext: () => void; onPrev: () => void }) => {
+export const VerifyMnemonic = ({ onNext }: { page: TPages; onNext: () => void; onPrev: () => void }) => {
   const [randomWords, setRandomWords] = useState<TMnemonicWords>();
   const [hiddenRandomWords, setHiddenRandomWords] = useState<THiddenMnemonicWords>();
   const [currentSelection, setCurrentSelection] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
 
-  const { mnemonicWords, mnemonic, password } = useContext(SignInContext);
-  const { enqueueSnackbar } = useSnackbar();
-
-  const storePassword = async () => {
-    try {
-      setIsLoading(true);
-      await createPassword({ mnemonic, password });
-      enqueueSnackbar('Password successfully created', { variant: 'success' });
-    } catch (e) {
-      enqueueSnackbar(e as string, { variant: 'error' });
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  const { mnemonicWords } = useContext(SignInContext);
 
   useEffect(() => {
     if (mnemonicWords) {
@@ -55,40 +39,26 @@ export const VerifyMnemonic = ({ page, onNext, onPrev }: { page: TPages; onNext:
   if (randomWords && hiddenRandomWords) {
     return (
       <>
-        <div id={page} />
         <Title title="Verify your mnemonic" />
         <Subtitle subtitle="Select the words from your mnmonic based on their order" />
         <HiddenWords mnemonicWords={hiddenRandomWords} />
         <WordTiles
           mnemonicWords={randomWords}
           onClick={currentSelection !== numberOfRandomWords ? revealWord : undefined}
+          buttons
         />
         <Stack spacing={3} sx={{ width: 300 }}>
           <Button
             variant="contained"
             fullWidth
             size="large"
-            disabled={currentSelection !== numberOfRandomWords || isLoading}
-            onClick={async () => {
-              await storePassword();
+            disabled={currentSelection !== numberOfRandomWords}
+            onClick={() => {
               onNext();
             }}
-            endIcon={isLoading && <CircularProgress />}
           >
             Next
           </Button>
-          <Button
-            size="large"
-            onClick={onPrev}
-            fullWidth
-            sx={{
-              color: 'common.white',
-              border: '1px solid white',
-              '&:hover': { border: '1px solid white', '&:hover': { background: 'none' } },
-            }}
-          >
-            Back
-          </Button>
         </Stack>
       </>
     );