update components

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

@@ -2,3 +2,5 @@ export * from './heading';
 export * from './word-tiles';
 export * from './render-page';
 export * from './password-strength';
+export * from './error';
+export * from './textfields';

nym-wallet/src/pages/welcome/components/password-strength.tsx

@@ -51,7 +51,13 @@ const getPasswordStrength = (strength: TStrength) => {
   }
 };
 
-export const PasswordStrength = ({ password }: { password: string }) => {
+export const PasswordStrength = ({
+  password,
+  onChange,
+}: {
+  password: string;
+  onChange: (isStrong: boolean) => void;
+}) => {
   const [strength, setStrength] = useState<TStrength>('init');
 
   useEffect(() => {
@@ -72,6 +78,14 @@ export const PasswordStrength = ({ password }: { password: string }) => {
     setStrength('weak');
   }, [password]);
 
+  useEffect(() => {
+    if (strength === 'strong') {
+      onChange(true);
+    } else {
+      onChange(false);
+    }
+  }, [strength]);
+
   return (
     <Stack spacing={0.5}>
       <LinearProgress variant="determinate" color={colorMap[strength]} value={getPasswordStrength(strength)} />

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

@@ -1,43 +1,38 @@
-import React, { useContext, useState } from 'react';
-import { Alert, Button, IconButton, Stack, TextField } from '@mui/material';
+import React, { useState } from 'react';
+import { IconButton, Stack, TextField } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
-import { ClientContext } from '../../../context/main';
+import { Error } from './error';
 
-export const MnemonicInput: React.FC<{ mnemonic: string; onUpdateMnemonic: (mnemonic: string) => void }> = ({
-  mnemonic,
-  onUpdateMnemonic,
-}) => {
-  const { error } = useContext(ClientContext);
-  return (
-    <Stack spacing={2}>
-      <TextField
-        placeholder="Mnemonic"
-        value={mnemonic}
-        onChange={(e) => onUpdateMnemonic(e.target.value)}
-        multiline
-        rows={5}
-        fullWidth
-      />
-      {error && (
-        <Alert severity="error" variant="outlined" data-testid="error" sx={{ color: 'error.light', width: '100%' }}>
-          {error}
-        </Alert>
-      )}
-    </Stack>
-  );
-};
+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>
+);
 
-export const PasswordInput: React.FC<{ password: string; onUpdatePassword: (password: string) => void }> = ({
-  password,
-  onUpdatePassword,
-}) => {
+export const PasswordInput: React.FC<{
+  password: string;
+  error?: string;
+  label: string;
+  onUpdatePassword: (password: string) => void;
+}> = ({ password, label, error, onUpdatePassword }) => {
   const [showPassword, setShowPassword] = useState(false);
-  const { error } = useContext(ClientContext);
 
   return (
     <Stack spacing={2}>
       <TextField
-        label="Password"
+        label={label}
         fullWidth
         value={password}
         onChange={(e) => onUpdatePassword(e.target.value)}
@@ -50,11 +45,7 @@ export const PasswordInput: React.FC<{ password: string; onUpdatePassword: (pass
           ),
         }}
       />
-      {error && (
-        <Alert severity="error" variant="outlined" data-testid="error" sx={{ color: 'error.light', width: '100%' }}>
-          {error}
-        </Alert>
-      )}
+      {error && <Error message={error} />}
     </Stack>
   );
 };

nym-wallet/src/pages/welcome/pages/create-account.tsx

@@ -1,118 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Alert, Button, Grid, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
-import { CopyToClipboard } from '@nymproject/react';
-import { WordTiles } from '../components';
-import { TMnemonicWords, TPages } from '../types';
-import { MnemonicInput } from '../components/textfields';
-import { signInWithMnemonic } from 'src/requests';
-import { ClientContext } from 'src/context/main';
-
-export const CreateAccount = ({
-  mnemonicWords,
-  mnemonic,
-  page,
-  onUseNew,
-  onNext,
-  onPrev,
-}: {
-  mnemonicWords?: TMnemonicWords;
-  mnemonic: string;
-  onUseNew: () => void;
-  onNext: () => void;
-  onPrev: () => void;
-  page: TPages;
-}) => {
-  const [toggle, setToggle] = useState('new');
-  const [existingMnemonic, setExistingMnemonic] = useState('');
-
-  const { setError } = useContext(ClientContext);
-  const validateMnemonic = async () => {
-    try {
-      await signInWithMnemonic(existingMnemonic);
-    } catch (e) {
-      setError(e as string);
-    }
-  };
-
-  useEffect(() => {
-    if (toggle === 'new') {
-      onUseNew();
-    } else {
-      setExistingMnemonic('');
-    }
-  }, [toggle]);
-
-  return (
-    <Grid container spacing={4} justifyContent="center" id={page}>
-      <Grid item xs={12}>
-        <Typography sx={{ color: 'common.white', fontWeight: 600 }} textAlign="center">
-          Write down your mnemonic
-        </Typography>
-      </Grid>
-      {toggle === 'new' && (
-        <Grid item xs={7}>
-          <Alert
-            icon={false}
-            sx={{ bgcolor: '#18263B', color: '#50ABFF' }}
-            action={mnemonic && <CopyToClipboard value={mnemonic} tooltip="Copy your mnemonic phrase" />}
-          >
-            <Typography>Please store your mnemonic in a safe place</Typography>
-            <Typography fontWeight={600} textTransform="uppercase">
-              This is the only way to access your wallet!
-            </Typography>
-          </Alert>
-        </Grid>
-      )}
-      <Grid item xs={7}>
-        <ToggleButtonGroup
-          fullWidth
-          value={toggle}
-          exclusive
-          onChange={(e: React.MouseEvent<HTMLElement>, value: string) => {
-            setToggle(value);
-          }}
-        >
-          <ToggleButton value="new">Create new mnemonic</ToggleButton>
-          <ToggleButton value="existing">Use existing mnemonic</ToggleButton>
-        </ToggleButtonGroup>
-      </Grid>
-      <Grid item xs={toggle === 'new' ? 12 : 7}>
-        {toggle === 'new' && <WordTiles mnemonicWords={mnemonicWords} showIndex />}
-        {toggle === 'existing' && (
-          <MnemonicInput mnemonic={existingMnemonic} onUpdateMnemonic={(mnc) => setExistingMnemonic(mnc)} />
-        )}
-      </Grid>
-
-      <Grid container item spacing={2} justifyContent="center">
-        <Grid item>
-          <Button
-            variant="outlined"
-            disableElevation
-            size="large"
-            onClick={onPrev}
-            sx={{
-              color: 'common.white',
-              border: '1px solid white',
-              '&:hover': { border: '1px solid white' },
-              width: 250,
-            }}
-          >
-            Back
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            variant="contained"
-            color="primary"
-            disableElevation
-            size="large"
-            onClick={toggle === 'new' ? onNext : validateMnemonic}
-            sx={{ width: 250 }}
-          >
-            Verify mnemonic
-          </Button>
-        </Grid>
-      </Grid>
-    </Grid>
-  );
-};