Add "SelectSeed" view.

This view is shown on a fresh start of the app to allow the user to either restore an existing wallet or initialize a new one.

Author: valentinewallace

src/action/nav.js

@@ -13,6 +13,10 @@ class NavAction {
     this._store.route = 'Loader';
   }
 
+  goSelectSeed() {
+    this._store.route = 'SelectSeed';
+  }
+
   goSeed() {
     this._store.route = 'Seed';
   }

src/view/main.js

@@ -4,6 +4,7 @@ import Container from '../component/container';
 import { NotificationBar } from '../component/notification';
 import Welcome from './welcome';
 import Loader from './loader';
+import SelectSeed from './select-seed';
 import Seed from './seed';
 import SeedVerify from './seed-verify';
 import SeedSuccess from './seed-success';
@@ -56,6 +57,9 @@ class MainView extends Component {
         />
         {route === 'Welcome' && <Welcome />}
         {route === 'Loader' && <Loader />}
+        {route === 'SelectSeed' && (
+          <SelectSeed store={store} wallet={wallet} nav={nav} />
+        )}
         {route === 'Seed' && <Seed store={store} wallet={wallet} />}
         {route === 'SeedVerify' && (
           <SeedVerify store={store} nav={nav} wallet={wallet} />

src/view/select-seed.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import Background from '../component/background';
+import MainContent from '../component/main-content';
+import { H1Text, CopyText } from '../component/text';
+import { RadioButton, GlasButton } from '../component/button';
+import { SettingItem } from '../component/list';
+import { color } from '../component/style';
+
+//
+// Select Seed View
+//
+
+const styles = StyleSheet.create({
+  content: {
+    justifyContent: 'center',
+    paddingLeft: 50,
+    paddingRight: 50,
+  },
+  copyTxt: {
+    textAlign: 'center',
+    marginTop: 10,
+    maxWidth: 450,
+  },
+  list: {
+    marginTop: 50,
+    width: 400,
+  },
+});
+
+const SelectSeedView = ({ store, wallet, nav }) => (
+  <Background color={color.blackDark}>
+    <MainContent style={styles.content}>
+      <H1Text>Recovery phrase?</H1Text>
+      <CopyText style={styles.copyTxt}>
+        If you already have a recovery phrase, you can use that now. Otherwise,
+        you should generate a new wallet.
+      </CopyText>
+      <View style={styles.list}>
+        <SettingItem
+          name="Generate a new wallet"
+          onSelect={() => wallet.setRestoringWallet({ restoring: false })}
+        >
+          <RadioButton selected={store.wallet.restoring === false} />
+        </SettingItem>
+        <SettingItem
+          name="Recover an existing wallet"
+          onSelect={() => wallet.setRestoringWallet({ restoring: true })}
+        >
+          <RadioButton selected={store.wallet.restoring === true} />
+        </SettingItem>
+      </View>
+    </MainContent>
+    <GlasButton
+      onPress={() =>
+        store.wallet.restoring ? wallet.initRestoreWallet() : nav.goSeed()
+      }
+    >
+      Next
+    </GlasButton>
+  </Background>
+);
+
+SelectSeedView.propTypes = {
+  store: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
+};
+
+export default observer(SelectSeedView);

stories/screen-story.js

@@ -41,6 +41,7 @@ import PayBitcoinDone from '../src/view/pay-bitcoin-done';
 import NoRoute from '../src/view/no-route';
 import Loader from '../src/view/loader';
 import LoaderSyncing from '../src/view/loader-syncing';
+import SelectSeed from '../src/view/select-seed';
 import SeedSuccess from '../src/view/seed-success';
 import Seed from '../src/view/seed';
 import SeedVerify from '../src/view/seed-verify';
@@ -81,6 +82,9 @@ sinon.stub(channel, 'closeSelectedChannel');
 storiesOf('Screens', module)
   .add('Welcome', () => <Welcome />)
   .add('Loader - First Time', () => <Loader />)
+  .add('Select Seed', () => (
+    <SelectSeed store={store} wallet={wallet} nav={nav} />
+  ))
   .add('Seed', () => <Seed store={store} wallet={wallet} />)
   .add('Seed Verify', () => (
     <SeedVerify store={store} nav={nav} wallet={wallet} />

test/unit/action/nav.spec.js

@@ -25,6 +25,13 @@ describe('Action Nav Unit Tests', () => {
     });
   });
 
+  describe('goSelectSeed()', () => {
+    it('should set correct route', () => {
+      nav.goSelectSeed();
+      expect(store.route, 'to equal', 'SelectSeed');
+    });
+  });
+
   describe('goSeed()', () => {
     it('should set correct route', () => {
       nav.goSeed();