diff --git a/nym-wallet/src/pages/welcome/pages/create-mnemonic.tsx b/nym-wallet/src/pages/welcome/pages/create-mnemonic.tsx index c18c0c1b0f..f300a56044 100644 --- a/nym-wallet/src/pages/welcome/pages/create-mnemonic.tsx +++ b/nym-wallet/src/pages/welcome/pages/create-mnemonic.tsx @@ -1,129 +1,67 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { Alert, Button, CircularProgress, Grid, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'; -import { CopyToClipboard } from '@nymproject/react'; -import { useSnackbar } from 'notistack'; +import React, { useContext, useEffect } from 'react'; +import { Alert, Button, Grid, Stack, Typography } from '@mui/material'; +import { Check, ContentCopySharp } from '@mui/icons-material'; +import { useClipboard } from 'use-clipboard-copy'; import { WordTiles } from '../components'; import { TPages } from '../types'; -import { MnemonicInput } from '../components/textfields'; import { SignInContext } from '../context'; -import { createPassword } from '../../../requests'; export const CreateMnemonic = ({ - page, onNext, - onPrev, - onComplete, }: { page: TPages; onNext: () => void; onPrev: () => void; onComplete: () => void; }) => { - const [toggle, setToggle] = useState('new'); - const [isLoading, setIsLoading] = useState(false); - - const { password, mnemonic, mnemonicWords, error, generateMnemonic, validateMnemonic, setMnemonic, setError } = + const { mnemonic, mnemonicWords, generateMnemonic, validateMnemonic, setMnemonic, setError } = useContext(SignInContext); - const { enqueueSnackbar } = useSnackbar(); - - const handleUseExisting = async () => { - setIsLoading(true); - setError(undefined); - try { - await validateMnemonic(); - await createPassword({ password, mnemonic }); - enqueueSnackbar('Password successfully created', { variant: 'success' }); - onComplete(); - } catch (e) { - setError(e as string); - setIsLoading(false); - } - }; - useEffect(() => { - setError(undefined); - if (toggle === 'new') { - generateMnemonic(); - } else { - setMnemonic(''); - } - }, [toggle]); + generateMnemonic(); + }, []); + + const { copy, copied } = useClipboard({ copiedTimeout: 5000 }); return ( - - - - Write down your mnemonic - - - {toggle === 'new' && ( - - } - > - Please store your mnemonic in a safe place - - This is the only way to access your wallet! - - - - )} - - , value: string) => { - setToggle(value); - }} - > - Create new mnemonic - Use existing mnemonic - - - - {toggle === 'new' && } - {toggle === 'existing' && ( - setMnemonic(mnc)} error={error} /> - )} - + + + Write down your mnemonic + - - - - - - - - - + + Below is your 24 word mnemonic, please store the mnemonic in a safe place. + This is the only way to access your wallet! + + + + + + + + ); }; diff --git a/nym-wallet/src/pages/welcome/pages/create-password.tsx b/nym-wallet/src/pages/welcome/pages/create-password.tsx index c0372b94cc..5539454007 100644 --- a/nym-wallet/src/pages/welcome/pages/create-password.tsx +++ b/nym-wallet/src/pages/welcome/pages/create-password.tsx @@ -1,61 +1,69 @@ import React, { useContext, useState } from 'react'; -import { Button, FormControl, Grid, Stack } from '@mui/material'; +import { Button, FormControl, Stack } from '@mui/material'; +import { useSnackbar } from 'notistack'; import { TPages } from '../types'; import { Subtitle, Title, PasswordStrength } from '../components'; import { PasswordInput } from '../components/textfields'; import { SignInContext } from '../context'; +import { createPassword } from '../../../requests'; -export const CreatePassword = ({ page, onPrev, onNext }: { page: TPages; onNext: () => void; onPrev: () => void }) => { +export const CreatePassword = ({ onSkip, onNext }: { page: TPages; onNext: () => void; onSkip: () => void }) => { const { password, setPassword } = useContext(SignInContext); const [confirmedPassword, setConfirmedPassword] = useState(''); const [isStrongPassword, setIsStrongPassword] = useState(false); + const [isLoading, setIsLoading] = useState(false); - const handleOnPrev = () => { + const { mnemonic } = useContext(SignInContext); + + const handleSkip = () => { setPassword(''); - onPrev(); + onSkip(); + }; + + const { enqueueSnackbar } = useSnackbar(); + + const storePassword = async () => { + try { + setIsLoading(true); + await createPassword({ mnemonic, password }); + enqueueSnackbar('Password successfully created', { variant: 'success' }); + setPassword(''); + onNext(); + } catch (e) { + enqueueSnackbar(e as string, { variant: 'error' }); + } finally { + setIsLoading(false); + } }; return ( - <> -
+ <Subtitle subtitle="Create a strong password. Min 8 characters, at least one capital letter, number and special symbol" /> - <Grid container justifyContent="center"> - <Grid item xs={6}> - <FormControl fullWidth> - <Stack spacing={2}> - <> - <PasswordInput password={password} onUpdatePassword={(pswd) => setPassword(pswd)} label="Password" /> - <PasswordStrength password={password} onChange={(isStrong) => setIsStrongPassword(isStrong)} /> - </> - <PasswordInput - password={confirmedPassword} - onUpdatePassword={(pswd) => setConfirmedPassword(pswd)} - label="Confirm password" - /> - <Button - size="large" - variant="contained" - disabled={password !== confirmedPassword || password.length === 0 || !isStrongPassword} - onClick={onNext} - > - Next - </Button> - <Button - size="large" - onClick={handleOnPrev} - sx={{ - color: 'common.white', - border: '1px solid white', - '&:hover': { border: '1px solid white', '&:hover': { background: 'none' } }, - }} - > - Back - </Button> - </Stack> - </FormControl> - </Grid> - </Grid> - </> + <FormControl fullWidth> + <Stack spacing={2}> + <> + <PasswordInput password={password} onUpdatePassword={(pswd) => setPassword(pswd)} label="Password" /> + <PasswordStrength password={password} onChange={(isStrong) => setIsStrongPassword(isStrong)} /> + </> + <PasswordInput + password={confirmedPassword} + onUpdatePassword={(pswd) => setConfirmedPassword(pswd)} + label="Confirm password" + /> + <Button + size="large" + variant="contained" + disabled={password !== confirmedPassword || password.length === 0 || !isStrongPassword || isLoading} + onClick={storePassword} + > + Next + </Button> + <Button size="large" color="info" onClick={handleSkip}> + Skip and sign in with mnemonic + </Button> + </Stack> + </FormControl> + </Stack> ); }; diff --git a/nym-wallet/src/pages/welcome/pages/welcome-content.tsx b/nym-wallet/src/pages/welcome/pages/welcome-content.tsx index b24af499a0..43c996fac5 100644 --- a/nym-wallet/src/pages/welcome/pages/welcome-content.tsx +++ b/nym-wallet/src/pages/welcome/pages/welcome-content.tsx @@ -13,22 +13,11 @@ export const WelcomeContent: React.FC<{ <Title title="Welcome to NYM" /> <SubtitleSlick subtitle="Next generation of privacy" /> <Stack spacing={3} sx={{ width: 300 }}> - <Button fullWidth variant="contained" color="primary" disableElevation size="large" onClick={onCreateAccount}> - Create Account + <Button fullWidth color="primary" variant="contained" size="large" onClick={onUseExisting}> + Sign in </Button> - <Button - fullWidth - variant="outlined" - size="large" - sx={{ - color: 'common.white', - border: '1px solid white', - '&:hover': { border: '1px solid white', '&:hover': { background: 'none' } }, - }} - onClick={onUseExisting} - disableRipple - > - Use existing account + <Button fullWidth color="inherit" disableElevation size="large" onClick={onCreateAccount}> + Create account </Button> </Stack> </> diff --git a/ts-packages/react-components/src/hooks/useClipboard.ts b/ts-packages/react-components/src/hooks/useClipboard.ts deleted file mode 100644 index 93442c0cdc..0000000000 --- a/ts-packages/react-components/src/hooks/useClipboard.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { useState } from 'react'; -import { useClipboard } from 'use-clipboard-copy'; - -export const useClipboardHook = () => { - const [isCopied, setIsCopied] = useState(false); - - const clipboard = useClipboard(); - - const copy = (value: string) => { - clipboard.copy(value); - setIsCopied(true); - }; - - return { isCopied, copy }; -};