dont force user to copy mnemonic (#2992)

* dont force user to copy mnemonic

* add title to mnemonic page

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 (
     <Box sx={{ mt: 1 }}>
       <DialogContent>
-        <Mnemonic mnemonic={mnemonic} handleCopy={copy} copied={copied} />
+        <Mnemonic mnemonic={mnemonic} handleConfirmed={setConfirmed} confirmed={confirmed} />
       </DialogContent>
       <DialogActions sx={{ p: 3, pt: 0, gap: 2 }}>
         <StyledBackButton onBack={onBack} />
-        <Button disabled={!copied} fullWidth disableElevation variant="contained" size="large" onClick={onNext}>
-          I saved my mnemonic
+        <Button disabled={!confirmed} fullWidth disableElevation variant="contained" size="large" onClick={onNext}>
+          Continue
         </Button>
       </DialogActions>
     </Box>

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 = () => {
               />
             </>
           ) : (
-            <Mnemonic mnemonic={accountMnemonic.value} handleCopy={copy} copied={copied} />
+            <Mnemonic mnemonic={accountMnemonic.value} />
           )}
         </Box>
       </DialogContent>

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;
 }) => (
-  <Stack spacing={2} alignItems="center">
-    <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>
+  <Stack spacing={2}>
+    {withTitle && (
+      <Box sx={{ pb: 2, textAlign: 'center' }}>
+        <Title title="Copy and save or write down your mnemonic" />
+      </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>
 );

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

@@ -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>
-);

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={() => {

nym-wallet/src/pages/index.ts

@@ -1,4 +1,3 @@
-export * from './auth';
 export * from './Admin';
 export * from './balance';
 export * from './bonding';