Seed verify mobile.

src/action/index-mobile.js

@@ -116,7 +116,6 @@ observe(store, 'lndReady', () => {
 
 // STUB DURING DEVELOPMENT
 sinon.stub(wallet, 'update');
-sinon.stub(wallet, 'checkSeed');
 sinon.stub(wallet, 'getExchangeRate');
 sinon.stub(transaction, 'update');
 sinon.stub(invoice, 'generateUri');
@@ -199,6 +198,32 @@ store.selectedTransaction = (store.computedTransactions || []).find(
   tx => tx.type === 'bitcoin'
 );
 store.selectedChannel = store.computedChannels && store.computedChannels[0];
+store.seedMnemonic = [
+  'empower',
+  'neglect',
+  'experience',
+  'elevator',
+  'entropy',
+  'future',
+  'trust',
+  'swift',
+  'pluck',
+  'easy',
+  'kite',
+  'measure',
+  'engage',
+  'settle',
+  'dog',
+  'manager',
+  'tool',
+  'fan',
+  'neglect',
+  'conduct',
+  'blouse',
+  'stone',
+  'quit',
+  'cashew',
+];
 store.logs = [
   '[14:00:24.995] [info] Using lnd in path lnd',
   'Checking for update',

src/action/wallet.js

@@ -274,13 +274,42 @@ class WalletAction {
   }
 
   /**
-   * Initialize the seed flow by navigating to the proper next view.
+   * Initialize the seed flow by navigating to the proper next view and
+   * resetting the current seed index.
    * @return {undefined}
    */
   initSeed() {
+    this._store.wallet.seedIndex = 0;
     this._nav.goSeedIntro ? this._nav.goSeedIntro() : this._nav.goSeed();
   }
 
+  /**
+   * Initialize the next seed view by setting a new seedIndex or, if all seed
+   * words have been displayed, navigating to the mobile seed verify view.
+   * view.
+   * @return {undefined}
+   */
+  initNextSeedPage() {
+    if (this._store.wallet.seedIndex < 16) {
+      this._store.wallet.seedIndex += 8;
+    } else {
+      this.initSeedVerify();
+    }
+  }
+
+  /**
+   * Initialize the previous seed view by setting a new seedIndex or, if on the
+   * first seed page, navigating to the select seed view.
+   * @return {undefined}
+   */
+  initPrevSeedPage() {
+    if (this._store.wallet.seedIndex >= 8) {
+      this._store.wallet.seedIndex -= 8;
+    } else {
+      this._nav.goSelectSeed();
+    }
+  }
+
   /**
    * Initialize the restore wallet view by resetting input values and then
    * navigating to the view.

src/component/header.js

@@ -76,6 +76,7 @@ const titleStyles = StyleSheet.create({
     alignItems: 'center',
   },
   title: {
+    textAlign: 'center',
     fontFamily: 'OpenSans Regular',
     fontSize: 15,
     letterSpacing: 2,
@@ -86,7 +87,7 @@ const titleStyles = StyleSheet.create({
   },
 });
 
-export const Title = ({ title = '', style, children }) => (
+export const Title = ({ title = '', style, keepCase, children }) => (
   <View style={titleStyles.titleWrapper}>
     {children}
     <Text
@@ -96,14 +97,15 @@ export const Title = ({ title = '', style, children }) => (
         style,
       ]}
     >
-      {title.toUpperCase()}
+      {keepCase ? title : title.toUpperCase()}
     </Text>
   </View>
 );
 
 Title.propTypes = {
   title: PropTypes.string,
   style: View.propTypes.style,
+  keepCase: PropTypes.bool,
   children: PropTypes.node,
 };
 

src/component/input.js

@@ -1,39 +1,58 @@
 import React, { Component } from 'react';
-import {
-  TextInput as RNTextInput,
-  Text as RNText,
-  StyleSheet,
-} from 'react-native';
+import { TextInput as RNTextInput, Text as RNText } from 'react-native';
 import PropTypes from 'prop-types';
-import { color, font } from './style';
+import { createStyles, maxWidth } from '../component/media-query';
+import { color, font, breakWidth } from './style';
 
 //
 // Base Text Input
 //
 
-const baseStyles = StyleSheet.create({
+const baseStyles = {
   input: {
     fontFamily: 'OpenSans Regular',
     fontSize: font.sizeM,
     lineHeight: font.lineHeightM + 3,
     height: font.lineHeightM + 2 * 12,
     color: color.blackText,
   },
-});
+};
+
+const styles = createStyles(
+  baseStyles,
 
-export const TextInput = ({ style, ...props }) => (
-  <RNTextInput
-    style={[baseStyles.input, style]}
-    autoCorrect={false}
-    autoCapitalize="none"
-    underlineColorAndroid="rgba(0,0,0,0)"
-    placeholderTextColor={color.greyPlaceholder}
-    {...props}
-  />
+  maxWidth(breakWidth, {
+    input: {
+      lineHeight: undefined,
+    },
+  })
 );
 
+export class TextInput extends Component {
+  componentDidUpdate(prevProps) {
+    const { autoFocus } = this.props;
+    prevProps.autoFocus === false && autoFocus && this._input.focus();
+  }
+
+  render() {
+    const { style, ...props } = this.props;
+    return (
+      <RNTextInput
+        style={[styles.input, style]}
+        autoCorrect={false}
+        autoCapitalize="none"
+        underlineColorAndroid="rgba(0,0,0,0)"
+        placeholderTextColor={color.greyPlaceholder}
+        ref={component => (this._input = component)}
+        {...props}
+      />
+    );
+  }
+}
+
 TextInput.propTypes = {
   style: RNText.propTypes.style,
+  autoFocus: PropTypes.bool,
 };
 
 //

src/store.js

@@ -47,6 +47,7 @@ export class Store {
         newPassword: '',
         passwordVerify: '',
         seedVerify: ['', '', ''],
+        seedIndex: 0,
         restoring: false,
         restoreIndex: 0,
         restoreSeed: Array(24).fill(''),

src/view/main-mobile.js

@@ -10,6 +10,8 @@ import WelcomeView from './welcome';
 import LoaderView from './loader';
 import SelectSeedView from './select-seed';
 import SeedIntroView from './seed-intro-mobile';
+import SeedView from './seed-mobile';
+import SeedVerifyView from './seed-verify-mobile';
 import SetPinView from './set-pin-mobile';
 import SetPinConfirmView from './set-pin-confirm-mobile';
 import SeedSuccessView from './seed-success-mobile';
@@ -59,12 +61,16 @@ const Welcome = () => <WelcomeView />;
 
 const Loader = () => <LoaderView />;
 
-const SelectSeed = () => (
-  <SelectSeedView store={store} wallet={wallet} nav={nav} />
-);
+const SelectSeed = () => <SelectSeedView store={store} wallet={wallet} />;
 
 const SeedIntro = () => <SeedIntroView nav={nav} />;
 
+const Seed = () => <SeedView store={store} wallet={wallet} />;
+
+const SeedVerify = () => (
+  <SeedVerifyView store={store} nav={nav} wallet={wallet} />
+);
+
 const SetPassword = () => <SetPinView store={store} auth={auth} nav={nav} />;
 
 const SetPasswordConfirm = () => (
@@ -167,6 +173,8 @@ const MainStack = createStackNavigator(
     Loader,
     SelectSeed,
     SeedIntro,
+    Seed,
+    SeedVerify,
     SetPassword,
     SetPasswordConfirm,
     SeedSuccess,

src/view/seed-mobile.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import MainContent from '../component/main-content';
+import { Text } from '../component/text';
+import { Background } from '../component/background';
+import { Header, Title } from '../component/header';
+import { Button, BackButton, GlasButton } from '../component/button';
+import LightningBoltIcon from '../asset/icon/lightning-bolt';
+import { color, font } from '../component/style';
+
+//
+// Seed (Mobile) View
+//
+
+const styles = StyleSheet.create({
+  header: {
+    height: 150,
+  },
+  title: {
+    width: 200,
+  },
+  background: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: color.blackDark,
+  },
+  seed: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  pagination: {
+    paddingBottom: 10,
+  },
+});
+
+const SeedView = ({ store, wallet }) => (
+  <Background image="purple-gradient-bg">
+    <Header separator style={styles.header}>
+      <BackButton onPress={() => wallet.initPrevSeedPage()} />
+      <Title
+        style={styles.title}
+        keepCase
+        title="Write down each word and store it in a safe place."
+      >
+        <LightningBoltIcon height={35} width={29} />
+      </Title>
+      <Button disabled onPress={() => {}} />
+    </Header>
+    <MainContent style={styles.background}>
+      <View style={styles.seed}>
+        <WordList
+          startingIndex={store.wallet.seedIndex}
+          seedMnemonic={store.seedMnemonic.slice(
+            store.wallet.seedIndex,
+            store.wallet.seedIndex + 8
+          )}
+        />
+        <Text style={styles.pagination}>
+          {`${store.wallet.seedIndex + 8} of 24`}
+        </Text>
+      </View>
+      <GlasButton onPress={() => wallet.initNextSeedPage()}>Next</GlasButton>
+    </MainContent>
+  </Background>
+);
+
+SeedView.propTypes = {
+  store: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+};
+
+//
+// Word List
+//
+
+const listStyles = StyleSheet.create({
+  wrapper: {
+    justifyContent: 'center',
+    margin: 20,
+  },
+  words: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    maxWidth: 700,
+  },
+});
+
+const WordList = ({ seedMnemonic, startingIndex }) => (
+  <View style={listStyles.wrapper}>
+    <View style={listStyles.words}>
+      {seedMnemonic.map((word, i) => (
+        <Word word={word} index={startingIndex + i + 1} key={i} />
+      ))}
+    </View>
+  </View>
+);
+
+WordList.propTypes = {
+  seedMnemonic: PropTypes.array.isRequired,
+  startingIndex: PropTypes.number,
+};
+
+//
+// Word
+//
+
+const wordStyles = StyleSheet.create({
+  wrapper: {
+    justifyContent: 'center',
+    height: 45,
+    width: 115,
+    margin: 10,
+    borderWidth: 1,
+    borderColor: color.seedBorder,
+    backgroundColor: color.seedBackground,
+  },
+  word: {
+    fontSize: font.sizeS * 1.2,
+    paddingLeft: 10,
+  },
+});
+
+const Word = ({ word, index }) => (
+  <View style={wordStyles.wrapper}>
+    <Text style={wordStyles.word}>
+      {index}. {word}
+    </Text>
+  </View>
+);
+
+Word.propTypes = {
+  word: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+export default observer(SeedView);