From a4ca94ccefb0c4e10ec1817870d2e225d044c90f Mon Sep 17 00:00:00 2001 From: Fouad Date: Mon, 13 Feb 2023 10:26:37 +0000 Subject: [PATCH] dont force user to copy mnemonic (#2992) * dont force user to copy mnemonic * add title to mnemonic page --- .../Accounts/modals/AddAccountModal.tsx | 9 ++-- .../Accounts/modals/MnemonicModal.tsx | 5 +- nym-wallet/src/components/Mnemonic.tsx | 54 ++++++++++--------- nym-wallet/src/pages/auth/index.tsx | 9 ---- .../src/pages/auth/pages/create-mnemonic.tsx | 14 +++-- nym-wallet/src/pages/index.ts | 1 - 6 files changed, 39 insertions(+), 53 deletions(-) delete mode 100644 nym-wallet/src/pages/auth/index.tsx diff --git a/nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx b/nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx index 61d6f7b9e5..ac2132e636 100644 --- a/nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx +++ b/nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx @@ -10,7 +10,6 @@ import { TextField, Typography, } from '@mui/material'; -import { useClipboard } from 'use-clipboard-copy'; import { createMnemonic, validateMnemonic } from 'src/requests'; import { Console } from 'src/utils/console'; import { AccountsContext } from 'src/context'; @@ -30,16 +29,16 @@ const importAccountSteps = [ ]; const MnemonicStep = ({ mnemonic, onNext, onBack }: { mnemonic: string; onNext: () => void; onBack: () => void }) => { - const { copy, copied } = useClipboard({ copiedTimeout: 5000 }); + const [confirmed, setConfirmed] = useState(false); return ( - + - diff --git a/nym-wallet/src/components/Accounts/modals/MnemonicModal.tsx b/nym-wallet/src/components/Accounts/modals/MnemonicModal.tsx index c9ea2202a3..e2d6e02c2a 100644 --- a/nym-wallet/src/components/Accounts/modals/MnemonicModal.tsx +++ b/nym-wallet/src/components/Accounts/modals/MnemonicModal.tsx @@ -11,15 +11,12 @@ import { Typography, } from '@mui/material'; import { AccountsContext } from 'src/context'; -import { useClipboard } from 'use-clipboard-copy'; import { Mnemonic, PasswordInput } from 'src/components'; import { StyledBackButton } from 'src/components/StyledBackButton'; export const MnemonicModal = () => { const [password, setPassword] = useState(''); - const { copy, copied } = useClipboard({ copiedTimeout: 5000 }); - const { dialogToDisplay, setDialogToDisplay, @@ -72,7 +69,7 @@ export const MnemonicModal = () => { /> ) : ( - + )} diff --git a/nym-wallet/src/components/Mnemonic.tsx b/nym-wallet/src/components/Mnemonic.tsx index d445172e9a..ac222d2cef 100644 --- a/nym-wallet/src/components/Mnemonic.tsx +++ b/nym-wallet/src/components/Mnemonic.tsx @@ -1,23 +1,33 @@ import React from 'react'; -import { Button, Stack, TextField, Typography } from '@mui/material'; -import { Check, ContentCopySharp } from '@mui/icons-material'; +import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material'; import { Warning } from './Warning'; +import { Title } from 'src/pages/auth/components/heading'; +import { Box } from '@mui/system'; export const Mnemonic = ({ mnemonic, - copied, - handleCopy, + confirmed, + withTitle, + handleConfirmed, }: { mnemonic: string; - copied: boolean; - handleCopy: (text?: string) => void; + confirmed?: boolean; + withTitle?: boolean; + handleConfirmed?: (confirmed: boolean) => void; }) => ( - - - - Below is your 24 word mnemonic, make sure to store it in a safe place for accessing your wallet in the future - - + + {withTitle && ( + + + </Box> + )} + <Box sx={{ pb: 2 }}> + <Warning> + <Typography sx={{ textAlign: 'center' }}> + Below is your 24 word mnemonic, make sure to store it in a safe place for accessing your wallet in the future + </Typography> + </Warning> + </Box> <TextField label="Mnemonic" type="input" @@ -38,19 +48,11 @@ export const Mnemonic = ({ }} /> - <Button - color="inherit" - disableElevation - size="large" - onClick={() => { - handleCopy(mnemonic); - }} - sx={{ - width: 250, - }} - endIcon={!copied ? <ContentCopySharp /> : <Check color="success" />} - > - Copy mnemonic - </Button> + {handleConfirmed && ( + <FormControlLabel + label="I saved my mnemonic" + control={<Checkbox checked={confirmed} onChange={(_, checked) => handleConfirmed(checked)} />} + /> + )} </Stack> ); diff --git a/nym-wallet/src/pages/auth/index.tsx b/nym-wallet/src/pages/auth/index.tsx deleted file mode 100644 index 598566db6f..0000000000 --- a/nym-wallet/src/pages/auth/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { AuthProvider } from 'src/context'; -import { AuthRoutes } from 'src/routes/auth'; - -export const Auth = () => ( - <AuthProvider> - <AuthRoutes /> - </AuthProvider> -); diff --git a/nym-wallet/src/pages/auth/pages/create-mnemonic.tsx b/nym-wallet/src/pages/auth/pages/create-mnemonic.tsx index 2809d3b3b1..e3ab373d55 100644 --- a/nym-wallet/src/pages/auth/pages/create-mnemonic.tsx +++ b/nym-wallet/src/pages/auth/pages/create-mnemonic.tsx @@ -1,13 +1,13 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Container, Button, Stack } from '@mui/material'; import { AuthContext } from 'src/context/auth'; -import { useClipboard } from 'use-clipboard-copy'; import { Mnemonic } from '../../../components'; export const CreateMnemonic = () => { const { mnemonic, mnemonicWords, generateMnemonic, resetState } = useContext(AuthContext); const navigate = useNavigate(); + const [confirmed, setConfirmed] = useState(false); useEffect(() => { if (mnemonicWords.length === 0) { @@ -15,12 +15,10 @@ export const CreateMnemonic = () => { } }, []); - const { copy, copied } = useClipboard({ copiedTimeout: 5000 }); return ( - <Container maxWidth="xs"> + <Container maxWidth="sm"> <Stack alignItems="center" spacing={3} maxWidth="xs"> - <Mnemonic mnemonic={mnemonic} handleCopy={copy} copied={copied} /> - + <Mnemonic mnemonic={mnemonic} handleConfirmed={setConfirmed} confirmed={confirmed} withTitle /> <Button variant="contained" color="primary" @@ -28,9 +26,9 @@ export const CreateMnemonic = () => { size="large" onClick={() => navigate('/verify-mnemonic')} sx={{ width: '100%', fontSize: 15 }} - disabled={!copied} + disabled={!confirmed} > - I saved my mnemonic + Continue </Button> <Button onClick={() => { diff --git a/nym-wallet/src/pages/index.ts b/nym-wallet/src/pages/index.ts index c2944d771c..21d21cf7b5 100644 --- a/nym-wallet/src/pages/index.ts +++ b/nym-wallet/src/pages/index.ts @@ -1,4 +1,3 @@ -export * from './auth'; export * from './Admin'; export * from './balance'; export * from './bonding';