Menu refactoring using popup

ios/NativeSigner.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; };
 		00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };

package.json

@@ -28,6 +28,7 @@
     "react-native-camera": "^1.9.0",
     "react-native-keyboard-aware-scroll-view": "^0.5.0",
     "react-native-markdown-renderer": "^3.2.8",
+    "react-native-popup-menu": "^0.15.0",
     "react-native-qrcode": "^0.2.7",
     "react-native-secure-storage": "https://github.com/debris/react-native-secure-storage",
     "react-native-simple-picker": "^2.1.0",

src/App.js

@@ -25,13 +25,14 @@ import {
   withNavigation
 } from 'react-navigation';
 import { Provider as UnstatedProvider } from 'unstated';
+import { MenuProvider } from 'react-native-popup-menu';
+
 import '../ReactotronConfig';
 import colors from './colors';
 import Background from './components/Background';
 import HeaderLeftHome from './components/HeaderLeftHome';
 import SecurityHeader from './components/SecurityHeader';
 import About from './screens/About';
-import AccountAdd from './screens/AccountAdd';
 import AccountBackup from './screens/AccountBackup';
 import AccountDetails from './screens/AccountDetails';
 import AccountEdit from './screens/AccountEdit';
@@ -55,9 +56,11 @@ export default class App extends Component {
   render() {
     return (
       <UnstatedProvider>
-        <StatusBar barStyle="light-content" />
-        <Background />
-        <Screens />
+        <MenuProvider backHandler={true}>
+          <StatusBar barStyle="light-content" />
+          <Background />
+          <Screens />
+        </MenuProvider>
       </UnstatedProvider>
     );
   }
@@ -156,12 +159,6 @@ const Screens = createStackNavigator(
               headerLeft: <HeaderLeftHome />
             }
           },
-          AccountAdd: {
-            screen: AccountAdd,
-            navigationOptions: {
-              headerLeft: <HeaderLeftHome />
-            }
-          },
           AccountNetworkChooser: {
             screen: AccountNetworkChooser
           },

src/components/PopupMenu.js

@@ -0,0 +1,62 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// @flow
+
+import React from 'react';
+import { Text } from 'react-native';
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+} from 'react-native-popup-menu';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import colors from '../colors';
+
+export default class PopupMenu extends React.PureComponent {
+
+
+    render() {
+        const { onSelect, menuTriggerIconName, menuItems } = this.props
+        const menuTriggerIcon = <Icon name={menuTriggerIconName} size={35} color={colors.bg_text_sec} />
+        return (
+            <Menu
+                onSelect={onSelect}
+            >
+                <MenuTrigger children={menuTriggerIcon} />
+                <MenuOptions customStyles={menuOptionsStyles}>
+                    {
+                        menuItems.map((menuItem, index) => (
+                            <MenuOption key={index} value={menuItem.value} >
+                                <Text style={(menuItem.textStyle) ? menuItem.textStyle : null} >{menuItem.text}</Text>
+                            </MenuOption>
+                        ))
+                    }
+                </MenuOptions>
+            </Menu>
+        );
+    }
+}
+const menuOptionsStyles = {
+    optionWrapper: {
+        padding: 15,
+    },
+    optionText: {
+        fontFamily: 'Roboto',
+        fontSize: 16
+    },
+};

src/screens/About.js

@@ -27,8 +27,6 @@ export default class About extends React.PureComponent {
   };
 
   render() {
-    const { navigation } = this.props;
-    const isWelcome = navigation.getParam('isWelcome');
     return (
       <ScrollView style={styles.body} contentContainerStyle={{ padding: 20 }}>
         <Text style={styles.title}>PARITY SIGNER (v2.0-beta)</Text>

src/screens/AccountBackup.js

@@ -80,16 +80,16 @@ class AccountBackupView extends React.PureComponent {
           chainId={selected.chainId}
           title={selected.name}
         />
-        <Text style={styles.titleTop}>RECOVERY WORDS</Text>
+        <Text style={styles.titleTop}>RECOVERY PHRASE</Text>
         <Text style={styles.hintText}>
           Write these words down on paper. Keep it safe. These words allow
-          anyone to recover this account.
+          anyone to recover and access the funds of this account.
         </Text>
         <TouchableItem
           onPress={() => {
             Alert.alert(
-              'Use paper to store seed phrases',
-              `It's not recommended to transfer or store seed phrases digitally and unencrypted. Everyone who have the phrase is able to spend funds from this account.
+              'Write this recovery phrase on paper',
+              `It's not recommended to transfer or store a recovery phrase digitally and unencrypted. Anyone in possession of this recovery phrase is able to spend funds from this account.
               `,
               [
                 {
@@ -119,61 +119,20 @@ class AccountBackupView extends React.PureComponent {
             {selected.seed}
           </Text>
         </TouchableItem>
-        <Button
-          buttonStyles={[styles.nextStep, { marginBottom: 20 }]}
-          title="Done Backup"
-          onPress={() => {
-            if (isNew) {
-              Alert.alert(
-                'Important information',
-                "Make sure you've backed up recovery words for your account. Recovery words are the only way to restore access to your account in case of device failure/lost.",
-                [
-                  {
-                    text: 'Proceed',
-                    onPress: () => {
-                      this.props.navigation.navigate('AccountPin', {
-                        isWelcome: navigation.getParam('isWelcome'),
-                        isNew
-                      });
-                    }
-                  },
-                  {
-                    text: 'Cancel',
-                    style: 'cancel'
-                  }
-                ]
-              );
-            } else {
-              navigation.navigate('AccountList');
-            }
-          }}
-        />
-
-        {!isNew && (
+        {(isNew) &&
           <Button
-            buttonStyles={{ marginBottom: 40 }}
-            title="Change PIN"
+            buttonStyles={[styles.nextStep, { marginBottom: 20 }]}
+            title="Backup Done"
             onPress={() => {
-              navigation.navigate('AccountPin', { isNew });
-            }}
-          />
-        )}
 
-        {!isNew && (
-          <Button
-            buttonStyles={styles.deleteButton}
-            title="Delete Account"
-            onPress={() => {
               Alert.alert(
-                'Delete Account',
-                `Are you sure to delete ${selected.name || selected.address} and its private key?`,
+                'Important',
+                "Make sure you've backed up this recovery phrase. It is the only way to restore your account in case of device failure/lost.",
                 [
                   {
-                    text: 'Delete',
-                    style: 'destructive',
+                    text: 'Proceed',
                     onPress: () => {
-                      accounts.deleteAccount(selected);
-                      this.props.navigation.navigate('AccountList');
+                      this.props.navigation.navigate('AccountPin', { isNew });
                     }
                   },
                   {
@@ -184,7 +143,7 @@ class AccountBackupView extends React.PureComponent {
               );
             }}
           />
-        )}
+        }
       </ScrollView>
     );
   }