move textfield components to global components

nym-wallet/src/components/Accounts/AddAccountModal.tsx

@@ -16,6 +16,7 @@ import { ArrowBackSharp } from '@mui/icons-material';
 import { useClipboard } from 'use-clipboard-copy';
 import { createMnemonic } from 'src/requests';
 import { AccountsContext } from 'src/context';
+import { PasswordInput } from 'src/components';
 import { Mnemonic } from '../Mnemonic';
 
 const createAccountSteps = [
@@ -117,7 +118,12 @@ const ConfirmPassword = ({ onConfirm }: { onConfirm: (password: string) => void
             {error}
           </Typography>
         )}
-        <TextField value={value} onChange={(e) => setValue(e.target.value)} fullWidth type="password" />
+        <PasswordInput
+          password={value}
+          onUpdatePassword={(pswrd) => setValue(pswrd)}
+          label="Confirm password"
+          autoFocus
+        />
       </DialogContent>
       <DialogActions sx={{ p: 3, pt: 0 }}>
         <Button
@@ -210,7 +216,6 @@ export const AddAccountModal = () => {
                 onConfirm={async (password) => {
                   if (data.accountName && data.mnemonic) {
                     await handleAddAccount({ accountName: data.accountName, mnemonic: data.mnemonic, password });
-                    setStep(0);
                   }
                 }}
               />

nym-wallet/src/components/Accounts/MnemonicModal.tsx

@@ -8,13 +8,13 @@ import {
   DialogContent,
   DialogTitle,
   IconButton,
-  TextField,
   Typography,
 } from '@mui/material';
 import { ArrowBackSharp } from '@mui/icons-material';
 import { AccountsContext } from 'src/context';
 import { useClipboard } from 'use-clipboard-copy';
 import { Mnemonic } from '../Mnemonic';
+import { PasswordInput } from '../textfields';
 
 export const MnemonicModal = () => {
   const [password, setPassword] = useState('');
@@ -62,12 +62,10 @@ export const MnemonicModal = () => {
           {!accountMnemonic.value ? (
             <>
               <Typography sx={{ mb: 2 }}>Enter the password used to login to your wallet</Typography>
-              <TextField
+              <PasswordInput
                 label="Password"
-                type="password"
-                fullWidth
-                value={password}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+                password={password}
+                onUpdatePassword={(pswrd) => setPassword(pswrd)}
                 autoFocus
               />
             </>

nym-wallet/src/components/Error.tsx

@@ -1,17 +1,8 @@
 import React from 'react';
-import { FallbackProps } from 'react-error-boundary';
-import { Alert, AlertTitle, Button } from '@mui/material';
+import { Alert } from '@mui/material';
 
-export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
-  <div>
-    <Alert severity="error" data-testid="error-message">
-      <AlertTitle>{error.name}</AlertTitle>
-      {error.message}
-    </Alert>
-    <Alert severity="error" data-testid="stack-trace">
-      <AlertTitle>Stack trace</AlertTitle>
-      {error.stack}
-    </Alert>
-    <Button onClick={resetErrorBoundary}>Back to safety</Button>
-  </div>
+export const Error = ({ message }: { message: string }) => (
+  <Alert severity="error" variant="outlined" data-testid="error" sx={{ color: 'error.light', width: '100%' }}>
+    {message}
+  </Alert>
 );

nym-wallet/src/components/ErrorFallback.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { Alert, AlertTitle, Button } from '@mui/material';
+
+export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
+  <div>
+    <Alert severity="error" data-testid="error-message">
+      <AlertTitle>{error.name}</AlertTitle>
+      {error.message}
+    </Alert>
+    <Alert severity="error" data-testid="stack-trace">
+      <AlertTitle>Stack trace</AlertTitle>
+      {error.stack}
+    </Alert>
+    <Button onClick={resetErrorBoundary}>Back to safety</Button>
+  </div>
+);

nym-wallet/src/components/index.ts

@@ -1,4 +1,4 @@
-export * from './Error';
+export * from './ErrorFallback';
 export * from './CopyToClipboard';
 export * from './NymCard';
 export * from './Nav';
@@ -16,3 +16,4 @@ export * from './InfoToolTip';
 export * from './Title';
 export * from './TokenPoolSelector';
 export * from './LoadingPage';
+export * from './textfields';

nym-wallet/src/components/textfields.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Box, IconButton, Stack, TextField } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
-import { Error } from './error';
+import { Error } from './Error';
 
 export const MnemonicInput: React.FC<{
   mnemonic: string;

nym-wallet/src/pages/auth/components/error.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Alert } from '@mui/material';
-
-export const Error = ({ message }: { message: string }) => (
-  <Alert severity="error" variant="outlined" data-testid="error" sx={{ color: 'error.light', width: '100%' }}>
-    {message}
-  </Alert>
-);

nym-wallet/src/pages/auth/components/index.ts

@@ -1,6 +1,4 @@
 export * from './heading';
 export * from './word-tiles';
 export * from './password-strength';
-export * from './error';
-export * from './textfields';
 export * from './step';

nym-wallet/src/pages/auth/pages/confirm-mnemonic.tsx

@@ -2,8 +2,9 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, Stack } from '@mui/material';
 import { validateMnemonic } from 'src/requests';
+import { MnemonicInput } from 'src/components';
 import { AuthContext } from 'src/context/auth';
-import { MnemonicInput, Subtitle } from '../components';
+import { Subtitle } from '../components';
 
 export const ConfirmMnemonic = () => {
   const { error, setError, setMnemonic, mnemonic } = useContext(AuthContext);

nym-wallet/src/pages/auth/pages/connect-password.tsx

@@ -4,8 +4,8 @@ import { Button, CircularProgress, FormControl, Stack } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { AuthContext } from 'src/context/auth';
 import { createPassword } from 'src/requests';
+import { PasswordInput } from 'src/components';
 import { Subtitle, Title, PasswordStrength } from '../components';
-import { PasswordInput } from '../components/textfields';
 
 export const ConnectPassword = () => {
   const [confirmedPassword, setConfirmedPassword] = useState<string>('');

nym-wallet/src/pages/auth/pages/create-password.tsx

@@ -4,7 +4,8 @@ import { Button, FormControl, Stack } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { AuthContext } from 'src/context/auth';
 import { createPassword } from 'src/requests';
-import { PasswordInput, Subtitle, Title, PasswordStrength } from '../components';
+import { PasswordInput } from 'src/components';
+import { Subtitle, Title, PasswordStrength } from '../components';
 
 export const CreatePassword = () => {
   const { password, setPassword, resetState, mnemonic } = useContext(AuthContext);

nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx

@@ -3,7 +3,8 @@ import { useHistory } from 'react-router-dom';
 import { Box, Button, FormControl, Stack } from '@mui/material';
 import { AppContext } from 'src/context';
 import { isPasswordCreated } from 'src/requests';
-import { MnemonicInput, Subtitle } from '../components';
+import { MnemonicInput } from 'src/components';
+import { Subtitle } from '../components';
 
 export const SignInMnemonic = () => {
   const [mnemonic, setMnemonic] = useState('');

nym-wallet/src/pages/auth/pages/signin-password.tsx

@@ -1,7 +1,8 @@
 import React, { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Box, Button, FormControl, Stack } from '@mui/material';
-import { PasswordInput, Subtitle } from '../components';
+import { PasswordInput } from 'src/components';
+import { Subtitle } from '../components';
 import { AppContext } from '../../../context/main';
 
 export const SignInPassword = () => {