Select network after creating wallet (#10)

* View dropdown on creating wallet

* Use separate component for network dropdown

* Fix imports

---------

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

App.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 
-import { HomeScreen } from './components/HomeScreen';
-import { Header } from './components/Header';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
 import SignMessage from './components/SignMessage';
+import { HomeScreen } from './components/HomeScreen';
 
 const Stack = createNativeStackNavigator();
 
 const App = (): React.JSX.Element => {
   return (
     <NavigationContainer>
-      <Header />
       <Stack.Navigator>
-        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Laconic" component={HomeScreen} />
         <Stack.Screen name="Sign Message" component={SignMessage} />
       </Stack.Navigator>
     </NavigationContainer>

components/HomeScreen.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { Text, Button, Dialog, Portal } from 'react-native-paper';
+import { Text, Button, Dialog, Portal, List } from 'react-native-paper';
 import { HDNode } from 'ethers/lib/utils';
 
 import { useNavigation } from '@react-navigation/native';
 
 import { generateWallet, resetWallet } from '../utils';
 import { DialogComponent } from './Dialog';
+import { NetworkDropdown } from './NetworkDropdown';
 
 const HomeScreen = () => {
   const navigation = useNavigation();
@@ -62,6 +63,7 @@ const HomeScreen = () => {
       </Portal>
       {isWalletCreated ? (
         <View>
+          <NetworkDropdown />
           <Text variant="headlineSmall">Account1</Text>
           <View style={{ marginTop: 15, marginBottom: 15 }}>
             <Text variant="bodyLarge">

components/NetworkDropdown.tsx

@@ -1,22 +1,18 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { Appbar, List } from 'react-native-paper';
+import { List } from 'react-native-paper';
 
-const Header = () => {
+const NetworkDropdown = () => {
   const [expanded, setExpanded] = useState<boolean>(false);
 
-  const handlePress = () => setExpanded(!expanded);
+  const expandNetworks = () => setExpanded(!expanded);
 
   return (
-    <View>
+    <View style={{ marginBottom: 20 }}>
-      <Appbar.Header mode="center-aligned">
-        <Appbar.Content title="Laconic" />
-      </Appbar.Header>
-
       <List.Accordion
         title="Select Network"
         expanded={expanded}
-        onPress={handlePress}>
+        onPress={expandNetworks}>
         <List.Item
           title="Ethereum"
           onPress={() => {
@@ -34,4 +30,4 @@ const Header = () => {
   );
 };
 
-export { Header };
+export { NetworkDropdown };