Show Mnemonic on wallet creation (#25)

* Display mnemonic on wallet creation

* Change srp to mnemonic

* Display mnemonic in a grid

* Remove line

* Make review changes

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>

components/Dialog.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
+import { View } from 'react-native';
 import { Button, Dialog, Portal, Text } from 'react-native-paper';
 
+import styles from '../styles/stylesheet';
+import GridView from './Grid';
+
 type CustomDialogProps = {
   visible: boolean;
   hideDialog: () => void;
@@ -13,11 +17,23 @@ const DialogComponent: React.FC<CustomDialogProps> = ({
   hideDialog,
   contentText,
 }) => {
+  const words = contentText.split(' ');
+
   return (
     <Portal>
       <Dialog visible={visible} onDismiss={hideDialog}>
         <Dialog.Content>
-          <Text variant="titleMedium">{contentText}</Text>
+          <Text variant="titleLarge">Mnemonic</Text>
+          <View style={styles.dialogTitle}>
+            <Text variant="titleMedium">
+              Your mnemonic provides full access to your wallet and funds. Make
+              sure to note it down.{' '}
+            </Text>
+            <Text variant="titleMedium" style={styles.dialogWarning}>
+              Do not share your mnemonic with anyone
+            </Text>
+            <GridView words={words} />
+          </View>
         </Dialog.Content>
         <Dialog.Actions>
           <Button onPress={hideDialog}>Done</Button>

components/Grid.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-paper';
+
+import styles from '../styles/stylesheet';
+import { GridViewProps } from '../types';
+
+const GridView: React.FC<GridViewProps> = ({ words }) => {
+  return (
+    <View style={styles.gridContainer}>
+      {words.map((word, index) => (
+        <View key={index} style={styles.gridItem}>
+          <Text>{index + 1}. </Text>
+          <Text variant="bodySmall">{word}</Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default GridView;

components/HomeScreen.tsx

@@ -18,6 +18,7 @@ const HomeScreen = () => {
   const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
   const [network, setNetwork] = useState<string>('eth');
   const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [phrase, setPhrase] = useState('');
 
   const [accounts, setAccounts] = useState<AccountsState>({
     ethAccounts: [],
@@ -30,7 +31,7 @@ const HomeScreen = () => {
   const createWalletHandler = async () => {
     setIsWalletCreating(true);
     await new Promise(resolve => setTimeout(resolve, 2000));
-    const { ethAccounts, cosmosAccounts } = await createWallet();
+    const { mnemonic, ethAccounts, cosmosAccounts } = await createWallet();
     ethAccounts &&
       cosmosAccounts &&
       setAccounts({
@@ -39,6 +40,7 @@ const HomeScreen = () => {
       });
     setWalletDialog(true);
     setIsWalletCreated(true);
+    setPhrase(mnemonic);
   };
 
   const confirmResetWallet = async () => {
@@ -86,7 +88,7 @@ const HomeScreen = () => {
       <DialogComponent
         visible={walletDialog}
         hideDialog={hideWalletDialog}
-        contentText="Wallet created"
+        contentText={phrase}
       />
       <ResetWalletDialog
         visible={resetWalletDialog}

styles/stylesheet.js

@@ -54,6 +54,33 @@ const styles = StyleSheet.create({
   networkDropdown: {
     marginBottom: 20,
   },
+  dialogTitle: {
+    padding: 10,
+  },
+  dialogContents: {
+    marginTop: 24,
+    padding: 10,
+    borderWidth: 1,
+    borderRadius: 10,
+  },
+  dialogWarning: {
+    color: 'red',
+  },
+  gridContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  gridItem: {
+    width: '25%',
+    margin: 8,
+    padding: 6,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
 });
 
 export default styles;

types.ts

@@ -10,6 +10,7 @@ export type Account = {
 };
 
 export type WalletDetails = {
+  mnemonic: string;
   ethAccounts: Account | undefined;
   cosmosAccounts: Account | undefined;
 };
@@ -51,3 +52,7 @@ export type ResetDialogProps = {
   hideDialog: () => void;
   onConfirm: () => void;
 };
+
+export type GridViewProps = {
+  words: string[];
+};

utils.ts

@@ -18,7 +18,7 @@ import { Account, SignMessageParams, WalletDetails } from './types';
 
 const createWallet = async (): Promise<WalletDetails> => {
   try {
-    const mnemonic = utils.entropyToMnemonic(utils.randomBytes(32));
+    const mnemonic = utils.entropyToMnemonic(utils.randomBytes(16));
     await setInternetCredentials('mnemonicServer', 'mnemonic', mnemonic);
 
     const hdNode = HDNode.fromMnemonic(mnemonic);
@@ -54,10 +54,10 @@ const createWallet = async (): Promise<WalletDetails> => {
       address: cosmosAddress,
     };
 
-    return { ethAccounts, cosmosAccounts };
+    return { mnemonic, ethAccounts, cosmosAccounts };
   } catch (error) {
     console.error('Error creating HD wallet:', error);
-    return { ethAccounts: undefined, cosmosAccounts: undefined };
+    return { mnemonic: '', ethAccounts: undefined, cosmosAccounts: undefined };
   }
 };