diff --git a/nym-wallet/src/components/Accounts/Accounts.tsx b/nym-wallet/src/components/Accounts/Accounts.tsx index 2cf5873e9e..211dff1f9d 100644 --- a/nym-wallet/src/components/Accounts/Accounts.tsx +++ b/nym-wallet/src/components/Accounts/Accounts.tsx @@ -1,5 +1,6 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { AccountsContext, AppContext } from 'src/context'; +import { isPasswordCreated } from 'src/requests'; import { EditAccountModal } from './modals/EditAccountModal'; import { AddAccountModal } from './modals/AddAccountModal'; import { AccountsModal } from './modals/AccountsModal'; @@ -9,7 +10,6 @@ import { MultiAccountHowTo } from './MultiAccountHowTo'; export const Accounts = () => { const { accounts, selectedAccount, setDialogToDisplay } = useContext(AccountsContext); - return accounts && selectedAccount ? ( <> setDialogToDisplay('Accounts')} /> @@ -23,14 +23,27 @@ export const Accounts = () => { export const SingleAccount = () => { const [showHowToDialog, setShowHowToDialog] = useState(false); + const [passwordExists, setPasswordExists] = useState(true); const { clientDetails } = useContext(AppContext); + + const checkForPassword = async () => { + const hasPassword = await isPasswordCreated(); + setPasswordExists(hasPassword); + }; + useEffect(() => { + checkForPassword(); + }, []); return ( <> setShowHowToDialog(true)} /> - setShowHowToDialog(false)} /> + setShowHowToDialog(false)} + passwordExists={passwordExists} + /> ); }; diff --git a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx index fa7ae1659c..9624ca5a6b 100644 --- a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx +++ b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx @@ -1,5 +1,16 @@ import React from 'react'; -import { Alert, Box, Paper, Dialog, DialogContent, DialogTitle, IconButton, Stack, Typography } from '@mui/material'; +import { + Alert, + Box, + Paper, + Dialog, + DialogContent, + DialogTitle, + IconButton, + Stack, + Typography, + Button, +} from '@mui/material'; import { Close } from '@mui/icons-material'; const passwordCreationSteps = [ @@ -10,11 +21,54 @@ const passwordCreationSteps = [ 'Now you can create multiple accounts', ]; -export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => ( +const MultiAccountPasswordExists = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => ( - Multi accounts + + Add new account + + + + + + + + + (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})} + > + + In order to create multiple accounts your wallet need password. Follow steps below to create password.{' '} + + + if you had created a password on this machine before, creating a new password for this account will + overwrite old one. + + + How to create a password for your account + {passwordCreationSteps.map((step, index) => ( + + {index + 1}. {step} + + ))} + + + + +); + +const MultiAccountPasswordNonExistent = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => ( + + + + + Multi accounts + @@ -30,14 +84,33 @@ export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handle icon={false} sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})} > - In order to create multiple accounts your wallet needs a password. - Follow steps below to create password. + + In order to create multiple accounts your wallet needs a password. + + Follow steps below to create password. - How to create a password for your account + How to create a password for your account {passwordCreationSteps.map((step, index) => ( - {`${index + 1}. ${step}`} + + {index + 1}. {step} + ))} ); + +export const MultiAccountHowTo = ({ + show, + handleClose, + passwordExists, +}: { + show: boolean; + handleClose: () => void; + passwordExists: boolean; +}) => + passwordExists ? ( + + ) : ( + + ); diff --git a/nym-wallet/src/context/accounts.tsx b/nym-wallet/src/context/accounts.tsx index 9725a9570c..1d76654a0e 100644 --- a/nym-wallet/src/context/accounts.tsx +++ b/nym-wallet/src/context/accounts.tsx @@ -1,6 +1,6 @@ import React, { createContext, Dispatch, SetStateAction, useContext, useEffect, useMemo, useState } from 'react'; import { AccountEntry } from '@nymproject/types'; -import { addAccount as addAccountRequest, showMnemonicForAccount } from 'src/requests'; +import { addAccount as addAccountRequest, showMnemonicForAccount, isPasswordCreated } from 'src/requests'; import { useSnackbar } from 'notistack'; import { AppContext } from './main'; @@ -39,6 +39,7 @@ export const AccountsProvider: React.FC = ({ children }) => { }); const [error, setError] = useState(); const [isLoading, setIsLoading] = useState(false); + const { onAccountChange, storedAccounts } = useContext(AppContext); const { enqueueSnackbar } = useSnackbar(); @@ -99,7 +100,14 @@ export const AccountsProvider: React.FC = ({ children }) => { } }; + // const checkForPassword = async () => { + // const hasPassword = await isPasswordCreated(); + // console.log('hasPassword', hasPassword); + // setPasswordExists(hasPassword); + // }; + useEffect(() => { + // checkForPassword(); if (storedAccounts) { setAccounts(storedAccounts); } diff --git a/nym-wallet/src/context/mocks/accounts.tsx b/nym-wallet/src/context/mocks/accounts.tsx index 7a3ff838e1..025cd2b863 100644 --- a/nym-wallet/src/context/mocks/accounts.tsx +++ b/nym-wallet/src/context/mocks/accounts.tsx @@ -53,6 +53,7 @@ export const MockAccountsProvider: React.FC = ({ children }) => { setIsLoading(false); } }; + return (