Add react-native-paper ui library (#7)

* Add ui library

* Replace alert with dialog on wallet creation

* Add review changes

* Add semicolon

* Remove comment

---------

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

components/Dialog.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Button, Dialog, Portal, Text } from "react-native-paper";
+
+type CustomDialogProps = {
+  visible: boolean;
+  hideDialog: () => void;
+  contentText: string;
+  titleText?: string;
+};
+
+const DialogComponent: React.FC<CustomDialogProps> = ({ visible, hideDialog, titleText, contentText }) => {
+  return (
+    <Portal>
+      <Dialog visible={visible} onDismiss={hideDialog}>
+        <Dialog.Content>
+          <Text variant="titleMedium">{contentText}</Text>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={hideDialog}>Done</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+export { DialogComponent };

components/Header.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
-import { View, Text, useColorScheme } from 'react-native';
-import { Colors } from 'react-native/Libraries/NewAppScreen';
-
-import styles from '../styles/stylesheet';
+import { View } from 'react-native';
+import { Appbar } from 'react-native-paper';
 
 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>
+      <Appbar.Header mode='center-aligned' >
+        <Appbar.Content title="Laconic Wallet" />
+      </Appbar.Header>
     </View>
   );
 };

components/HomeScreen.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { Text, Button, TextInput } from "react-native-paper";
+import { HDNode } from "ethers/lib/utils";
+
+import { generateWallet, resetWallet, signMessage } from '../utils';
+import { DialogComponent } from "./Dialog";
+
+const HomeScreen = () => {
+  const [message, setMessage] = useState<string>('');
+  const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
+  const [wallet, setWallet] = useState<HDNode | null>();
+  const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
+  const [walletDialog, setWalletDialog] = useState<boolean>(false);
+
+ const  hideWalletDialog = () => setWalletDialog(false);
+
+  const createWallet = async () => {
+    setIsWalletCreating(true);
+    await new Promise(resolve => setTimeout(resolve, 200));
+    const wallet = await generateWallet();
+    setWalletDialog(true);
+    if (wallet) {
+      setWallet(wallet);
+      setIsWalletCreated(true);
+    }
+  };
+
+  return (
+    <View style={{ marginTop: 24, paddingHorizontal: 24 }}>
+      <DialogComponent visible={walletDialog} hideDialog={hideWalletDialog} contentText="Wallet created" />
+      {isWalletCreated ? (
+        <View>
+          <Text variant="headlineSmall" >Account1</Text>
+          <View style={{ marginTop: 15, marginBottom: 15 }}>
+            <Text variant="bodyLarge">
+              <Text style={{ fontWeight: '700' }}>Address:</Text> {wallet && wallet.address.toString()}
+            </Text>
+            <Text variant="bodyLarge" >
+              <Text style={{ fontWeight: '700' }}>Public Key: </Text>{wallet && wallet.publicKey.toString()}
+            </Text>
+          </View>
+
+          <Text variant="headlineSmall" >Sign a Message</Text>
+          <View style={{ marginTop: 32, paddingHorizontal: 24 }}>
+            <TextInput mode="outlined"
+              placeholder="Enter your message"
+              onChangeText={text => setMessage(text)}
+              value={message}
+            />
+            <View
+              style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
+              <Button
+                mode="contained"
+                onPress={() => {
+                  signMessage(message);
+                }}
+              >Sign Message</Button>
+            </View>
+          </View>
+
+          <View style={{ marginTop: 100 }}>
+            <View
+              style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
+              <Button
+                mode="contained"
+                buttonColor="#B82B0D"
+                onPress={async () => {
+                  await resetWallet();
+                  setIsWalletCreated(false);
+                  setWallet(null);
+                  setIsWalletCreating(false);
+                }}
+              >Reset Wallet</Button>
+            </View>
+          </View>
+        </View>
+      ) : (
+        <View>
+          <Text variant="headlineSmall" >Create Wallet</Text>
+          <View style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
+            <Button
+              buttonColor="#37A640"
+              mode="contained"
+              loading={isWalletCreating}
+              onPress={createWallet}
+            >{isWalletCreating ? 'Creating' : 'Create'} </Button>
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+export { HomeScreen };