From f026d9345f8f976df79d73a9f63e276b2e8d8c50 Mon Sep 17 00:00:00 2001
From: Adwait Gharpure <69599306+Adw8@users.noreply.github.com>
Date: Tue, 13 Feb 2024 16:47:39 +0530
Subject: [PATCH] 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                                        |  7 +++----
 components/HomeScreen.tsx                      |  4 +++-
 components/{Header.tsx => NetworkDropdown.tsx} | 16 ++++++----------
 3 files changed, 12 insertions(+), 15 deletions(-)
 rename components/{Header.tsx => NetworkDropdown.tsx} (64%)

diff --git a/App.tsx b/App.tsx
index 3d62345..3bebca1 100644
--- a/App.tsx
+++ b/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>
diff --git a/components/HomeScreen.tsx b/components/HomeScreen.tsx
index 0553c62..dde5ae8 100644
--- a/components/HomeScreen.tsx
+++ b/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">
diff --git a/components/Header.tsx b/components/NetworkDropdown.tsx
similarity index 64%
rename from components/Header.tsx
rename to components/NetworkDropdown.tsx
index 5acf787..b00ed04 100644
--- a/components/Header.tsx
+++ b/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>
-      <Appbar.Header mode="center-aligned">
-        <Appbar.Content title="Laconic" />
-      </Appbar.Header>
-
+    <View style={{ marginBottom: 20 }}>
       <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 };