From 96c7fedacffe0119f45e31cb38b88cd3bc1a132e Mon Sep 17 00:00:00 2001
From: Adwait Gharpure <69599306+Adw8@users.noreply.github.com>
Date: Mon, 19 Feb 2024 17:45:31 +0530
Subject: [PATCH] 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     | 18 +++++++++++++++++-
 components/Grid.tsx       | 21 +++++++++++++++++++++
 components/HomeScreen.tsx |  6 ++++--
 styles/stylesheet.js      | 27 +++++++++++++++++++++++++++
 types.ts                  |  5 +++++
 utils.ts                  |  6 +++---
 6 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 components/Grid.tsx

diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index 22ccba8..9bef5e1 100644
--- a/components/Dialog.tsx
+++ b/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>
diff --git a/components/Grid.tsx b/components/Grid.tsx
new file mode 100644
index 0000000..752db7b
--- /dev/null
+++ b/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;
diff --git a/components/HomeScreen.tsx b/components/HomeScreen.tsx
index 0f66164..9acdc9f 100644
--- a/components/HomeScreen.tsx
+++ b/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}
diff --git a/styles/stylesheet.js b/styles/stylesheet.js
index cab8391..dbaad4a 100644
--- a/styles/stylesheet.js
+++ b/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;
diff --git a/types.ts b/types.ts
index 5a49569..ff85673 100644
--- a/types.ts
+++ b/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[];
+};
diff --git a/utils.ts b/utils.ts
index ce928e5..e8563a6 100644
--- a/utils.ts
+++ b/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 };
   }
 };