Generate wallet and sign message (#4)

* Store mnemonic and private key seperately

* Change variable names

* Refactor code in seperate components

* Display wallet details

* Remove unnecessary imports

* Make review changes

* Add method to reset wallet

* Make component self closing

* separate imports

---------

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

App.tsx

@@ -12,48 +12,24 @@ import {
   View,
 } from 'react-native';
 import { Colors } from 'react-native/Libraries/NewAppScreen';
+import { HDNode } from 'ethers/lib/utils';
 
+import { generateWallet, resetWallet, signMessage } from './utils';
 import styles from './styles/stylesheet';
-import { generateWallet, signMessage } from './utils';
+import { Section } from './components/Section';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-const Section = ({children, title}: SectionProps): React.JSX.Element => {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-};
 
 const App = (): React.JSX.Element => {
   const [message, setMessage] = useState('');
-  const [isWalletCreated, setIsWalletCreated] = useState(false);
+  const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
+  const [wallet, setWallet] = useState<HDNode | null>();
 
   const createWallet = async () => {
     Alert.alert('Creating Wallet...');
-    await generateWallet();
+    const wallet = await generateWallet();
+    if (wallet) {
+      setWallet(wallet);
       setIsWalletCreated(true);
+    }
   };
 
   const isDarkMode = useColorScheme() === 'dark';
@@ -81,23 +57,16 @@ const App = (): React.JSX.Element => {
           <View>
             {isWalletCreated ? (
               <View>
-                <Section title="Generate Wallet">Wallet Created! </Section>
+                <Section title="Wallet Details" />
-              </View>
+                <View style={{ marginTop: 32, paddingHorizontal: 24 }}>
-            ) : (
+                  <Text style={{ fontSize: 16, color: 'black' }}>
-              <View>
+                    Address: {wallet && wallet.address.toString()}
-                <Section title="Generate Wallet">
+                  </Text>
-                  Click the button to generate the wallet
+                  <Text style={{ fontSize: 16, color: 'black' }}>
-                </Section>
+                    Public Key: {wallet && wallet.publicKey.toString()}
-                <View style={{marginTop: 20, width: 150, alignSelf: 'center'}}>
+                  </Text>
-                  <Button
-                    title="Initialise Wallet"
-                    color="#841584"
-                    onPress={createWallet}
-                  />
-                </View>
-              </View>
-            )}
                 </View>
+                <Section title="Sign a message" />
                 <View>
                   <TextInput
                     style={{
@@ -111,7 +80,8 @@ const App = (): React.JSX.Element => {
                     onChangeText={text => setMessage(text)}
                     value={message}
                   />
-            <View style={{marginTop: 20, width: 150, alignSelf: 'center'}}>
+                  <View
+                    style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
                     <Button
                       title="Sign Message"
                       color="#841584"
@@ -121,6 +91,35 @@ const App = (): React.JSX.Element => {
                     />
                   </View>
                 </View>
+                <Section title="" />
+                <View>
+                  <View
+                    style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
+                    <Button
+                      title="Reset Wallet"
+                      color="#D30000"
+                      onPress={async () => {
+                        await resetWallet();
+                        setIsWalletCreated(false);
+                        setWallet(null);
+                      }}
+                    />
+                  </View>
+                </View>
+              </View>
+            ) : (
+              <View>
+                <Section title="Create Wallet" />
+                <View style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
+                  <Button
+                    title="Create"
+                    color="#841584"
+                    onPress={createWallet}
+                  />
+                </View>
+              </View>
+            )}
+          </View>
         </View>
       </ScrollView>
     </SafeAreaView>

components/Header.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View, Text, useColorScheme } from 'react-native';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+import styles from '../styles/stylesheet';
+
+const Header = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <View style={styles.headerContainer}>
+      <Text
+        style={[
+          styles.headerText,
+          {color: isDarkMode ? Colors.light : Colors.dark},
+        ]}>
+        Laconic Wallet
+      </Text>
+    </View>
+  );
+};
+
+export { Header };

components/Section.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from "react";
+import { Text, View, useColorScheme } from "react-native";
+import { Colors } from "react-native/Libraries/NewAppScreen";
+
+import styles from "../styles/stylesheet";
+
+type SectionProps = PropsWithChildren<{
+  title: string;
+}>;
+
+const Section = ({ children, title }: SectionProps): React.JSX.Element => {
+  const isDarkMode = useColorScheme() === 'dark';
+  return (
+    <View style={styles.sectionContainer}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: isDarkMode ? Colors.white : Colors.black,
+          },
+        ]}>
+        {title}
+        <Text style={styles.sectionDescription} />
+      </Text>
+    </View>
+  );
+};
+
+export { Section };

styles/stylesheet.js

@@ -8,7 +8,7 @@ const styles = StyleSheet.create({
   },
   headerText: {
     color: 'black',
-    fontSize: 22,
+    fontSize: 26,
     fontWeight: 'bold',
   },
   sectionContainer: {
@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
   },
   sectionTitle: {
-    fontSize: 24,
+    fontSize: 22,
     fontWeight: '600',
   },
   sectionDescription: {

utils.ts

@@ -3,14 +3,22 @@ import '@ethersproject/shims';
 import { Wallet, utils } from 'ethers';
 import { HDNode } from 'ethers/lib/utils';
 import { Alert } from 'react-native';
-import { getGenericPassword, setGenericPassword } from 'react-native-keychain';
+import {
+  setInternetCredentials,
+  getInternetCredentials,
+  resetInternetCredentials,
+} from 'react-native-keychain';
 
-const generateWallet = async () => {
+const generateWallet = async (): Promise<HDNode | undefined> => {
   try {
     const mnemonic = utils.entropyToMnemonic(utils.randomBytes(32));
     const hdNode = HDNode.fromMnemonic(mnemonic);
-    await setGenericPassword(mnemonic, hdNode.privateKey);
+
-    Alert.alert('Wallet stored successfully with address:', hdNode.address);
+    await setInternetCredentials('keyServer', 'key', hdNode.privateKey);
+    await setInternetCredentials('mnemonicServer', 'mnemonic', mnemonic);
+
+    Alert.alert('Wallet created successfully ');
+    return hdNode;
   } catch (error) {
     console.error('Error creating wallet ', error);
   }
@@ -18,11 +26,11 @@ const generateWallet = async () => {
 
 const signMessage = async (message: string) => {
   try {
-    const creds = await getGenericPassword();
+    const keyCred = await getInternetCredentials('keyServer');
-    const wallet = creds && new Wallet(creds.password);
+    const wallet = keyCred && new Wallet(keyCred.password);
     const signature = wallet && (await wallet.signMessage(message));
     if (typeof signature === 'string') {
-      Alert.alert('Message signed successfully with signature', signature);
+      Alert.alert('Message signature: ', signature);
     } else {
       Alert.alert('Message signing failed. Please try again.');
     }
@@ -31,4 +39,9 @@ const signMessage = async (message: string) => {
   }
 };
 
-export { generateWallet, signMessage };
+const resetWallet = async () => {
+  await resetInternetCredentials('keyServer');
+  await resetInternetCredentials('mnemonicServer');
+};
+
+export { generateWallet, signMessage, resetWallet };