Setup wallet if there are no keys (#131)

* Move the MenuIcon into the icons folder and expand it to allow different colors and sizes.

* Change the default screen if there are no keys

- Hide header and footer if there are no keys
- Pass hasKeys to RootNavigation
- Move loading wheel until after the keys have loaded.

src/RootNavigation.tsx

@@ -78,6 +78,7 @@ export type ScreenProps<T extends keyof RootStackParamList> = StackScreenProps<
 
 export const RootNavigation: React.FC<{
   currentScreen: string
+  hasKeys: boolean
   rifWalletServicesSocket: IRifWalletServicesSocket
   keyManagementProps: CreateKeysProps
   balancesScreenProps: BalancesScreenProps
@@ -89,6 +90,7 @@ export const RootNavigation: React.FC<{
   dappsScreenProps: DappsScreenScreenProps
 }> = ({
   currentScreen,
+  hasKeys,
   keyManagementProps,
   balancesScreenProps,
   activityScreenProps,
@@ -100,8 +102,8 @@ export const RootNavigation: React.FC<{
 }) => {
   return (
     <View style={styles.parent}>
-      <AppHeader />
-      <RootStack.Navigator>
+      {hasKeys && <AppHeader />}
+      <RootStack.Navigator initialRouteName={hasKeys ? 'Home' : 'CreateKeysUX'}>
         <RootStack.Screen
           name="Home"
           component={Screens.HomeScreen}
@@ -127,7 +129,9 @@ export const RootNavigation: React.FC<{
           options={{ ...sharedOptions, headerShown: false }}
         />
 
-        <RootStack.Screen name="CreateKeysUX" options={sharedOptions}>
+        <RootStack.Screen
+          name="CreateKeysUX"
+          options={{ ...sharedOptions, headerShown: false }}>
           {props => <CreateKeysNavigation {...props} {...keyManagementProps} />}
         </RootStack.Screen>
         <RootStack.Screen
@@ -236,7 +240,7 @@ export const RootNavigation: React.FC<{
           )}
         </RootStack.Screen>
       </RootStack.Navigator>
-      <AppFooterMenu currentScreen={currentScreen} />
+      {hasKeys && <AppFooterMenu currentScreen={currentScreen} />}
     </View>
   )
 }

src/components/icons/MenuIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import Svg, { Line } from 'react-native-svg'
+import { SVGIconInterface } from '.'
+
+export const MenuIcon: React.FC<SVGIconInterface> = ({
+  width,
+  height,
+  color,
+}) => (
+  <Svg
+    width={width || '18.727'}
+    height={height || 18.735}
+    viewBox="0 0 18.727 18.735">
+    <Line
+      x1="0"
+      y1="0.5"
+      x2="17"
+      y2="0.5"
+      stroke={color || '#707070'}
+      strokeWidth="2"
+    />
+    <Line
+      x1="0"
+      y1="12.5"
+      x2="17"
+      y2="12.5"
+      stroke={color || '#707070'}
+      strokeWidth="2"
+    />
+    <Line
+      x1="0"
+      y1="6.5"
+      x2="17"
+      y2="6.5"
+      stroke={color || '#707070'}
+      strokeWidth="2"
+    />
+  </Svg>
+)

src/core/Core.tsx

@@ -154,10 +154,13 @@ export const Core = () => {
     })
   }, [])
 
+  if (state.loading) {
+    return <LoadingScreen reason="Getting things setup" />
+  }
+
   return (
     <SafeAreaView>
       <StatusBar />
-      {state.loading && <LoadingScreen reason="Please wait..." />}
       {!active && <Cover />}
       {state.hasKeys && !unlocked && <RequestPIN unlock={unlockApp} />}
       <AppContext.Provider
@@ -173,6 +176,7 @@ export const Core = () => {
               abiEnhancer={abiEnhancer}>
               <RootNavigation
                 currentScreen={currentScreen}
+                hasKeys={state.hasKeys}
                 rifWalletServicesSocket={rifWalletServicesSocket}
                 keyManagementProps={{
                   generateMnemonic: () => KeyManagementSystem.create().mnemonic,

src/ux/appHeader/index.tsx

@@ -3,8 +3,8 @@ import React from 'react'
 import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
 import { AddressCopyComponent } from '../../components/copy/AddressCopyComponent'
 import { useSelectedWallet } from '../../Context'
-import MenuIcon from './MenuIcon'
 import { Network } from '@ethersproject/networks'
+import { MenuIcon } from '../../components/icons/MenuIcon'
 
 export const networks: Record<number, Network> = {
   30: {