use new sign in pages

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

@@ -4,3 +4,4 @@ export * from './render-page';
 export * from './password-strength';
 export * from './error';
 export * from './textfields';
+export * from './step';

nym-wallet/src/pages/welcome/index.tsx

@@ -1,13 +1,21 @@
 import React, { useContext, useState } from 'react';
 import { Stack, Box, CircularProgress } from '@mui/material';
-import { NymLogo } from '@nymproject/react';
-import { CreatePassword, ExistingAccount, CreateMnemonic, VerifyMnemonic, WelcomeContent } from './pages';
+import { NymWordmark } from '@nymproject/react';
+import {
+  CreatePassword,
+  ExistingAccount,
+  CreateMnemonic,
+  VerifyMnemonic,
+  WelcomeContent,
+  SignInMnemonic,
+} from './pages';
 import { TPages } from './types';
-import { RenderPage } from './components';
+import { RenderPage, Step } from './components';
 import { ClientContext } from '../../context/main';
+import { SignInPassword } from './pages/signin-password';
 
 export const Welcome = () => {
-  const [page, setPage] = useState<TPages>('welcome');
+  const [page, setPage] = useState<TPages>('sign in with mnemonic');
   const { isLoading } = useContext(ClientContext);
 
   return (
@@ -30,36 +38,34 @@ export const Welcome = () => {
           margin: 'auto',
         }}
       >
-        {' '}
         {isLoading ? (
           <CircularProgress size={72} />
         ) : (
           <Stack spacing={3} alignItems="center" sx={{ width: 1080 }}>
-            <NymLogo width={75} />
+            <NymWordmark width={75} />
+            <Step currentPage={page} totalSteps={3} />
             <RenderPage page={page}>
               <WelcomeContent
                 onUseExisting={() => setPage('existing account')}
-                onCreateAccount={() => setPage('create password')}
+                onCreateAccount={() => setPage('create mnemonic')}
                 page="welcome"
               />
-              <CreatePassword
-                onPrev={() => setPage('welcome')}
-                onNext={() => {
-                  setPage('create mnemonic');
-                }}
-                page="create password"
-              />
               <CreateMnemonic
                 onNext={() => setPage('verify mnemonic')}
                 onPrev={() => setPage('create password')}
                 onComplete={() => setPage('existing account')}
                 page="create mnemonic"
               />
-              <VerifyMnemonic
-                onNext={() => setPage('existing account')}
-                onPrev={() => setPage('create mnemonic')}
-                page="verify mnemonic"
+              <VerifyMnemonic onNext={() => setPage('create password')} onPrev={() => {}} page="verify mnemonic" />
+              <CreatePassword
+                onSkip={() => setPage('sign in with mnemonic')}
+                onNext={() => {
+                  setPage('sign in with password');
+                }}
+                page="create password"
               />
+              <SignInMnemonic onPrev={() => setPage('welcome')} page="sign in with mnemonic" />
+              <SignInPassword onPrev={() => setPage('welcome')} page="sign in with password" />
               <ExistingAccount
                 onPrev={() => setPage('welcome')}
                 onCreatePassword={() => setPage('create password')}

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

@@ -3,3 +3,4 @@ export * from './create-mnemonic';
 export * from './verify-mnemonic';
 export * from './create-password';
 export * from './existing-account';
+export * from './signin-mnemonic';

nym-wallet/src/pages/welcome/types.ts

@@ -5,7 +5,9 @@ export type TPages =
   | 'create password'
   | 'existing account'
   | 'select network'
-  | 'legacy create account';
+  | 'legacy create account'
+  | 'sign in with mnemonic'
+  | 'sign in with password';
 
 export type TMnemonicWord = {
   name: string;