Seed mobile

src/action/index-mobile.js

@@ -208,6 +208,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,41 @@ 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.
+   * @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/asset/icon/seed.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Svg, { Defs, Path, G, Use } from '../../component/svg';
+
+// SVGR has dropped some elements not supported by react-native-svg: filter, feOffset, feGaussianBlur, feColorMatrix
+const SvgSeed = props => (
+  <Svg
+    viewBox="0 0 37 44"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <Defs>
+      <Path
+        d="M3.178.25h23.156a3 3 0 0 1 3 3v29.235a3 3 0 0 1-3 3H3.178a3 3 0 0 1-3-3V3.25a3 3 0 0 1 3-3z"
+        id="b"
+      />
+    </Defs>
+    <G fill="none" fillRule="evenodd">
+      <G transform="translate(4 2)">
+        <Use fill="#000" filter="url(#a)" href="#b" />
+        <Use fill="#F5F5F5" href="#b" />
+      </G>
+      <Path
+        d="M7.784 31.725h11.034M7.784 28.062h21.95M7.784 24.35h21.95M7.784 20.638h21.95M7.784 16.926h21.95M7.784 13.213h21.95M7.784 9.501h21.95"
+        strokeOpacity={0.382}
+        stroke="#252F4A"
+        strokeLinecap="round"
+      />
+    </G>
+  </Svg>
+);
+
+export default SvgSeed;

src/component/header.js

@@ -3,15 +3,15 @@ import { View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import { createStyles, maxWidth } from './media-query';
 import Text from './text';
-import { color, breakWidth } from './style';
+import { color, font, breakWidth } from './style';
 
 //
 // Header
 //
 
 const baseStyles = {
   header: {
-    height: 75,
+    minHeight: 75,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -107,4 +107,47 @@ Title.propTypes = {
   children: PropTypes.node,
 };
 
+//
+// Large Title
+//
+
+const largeTitleStyles = StyleSheet.create({
+  titleWrapper: {
+    alignItems: 'center',
+    paddingTop: 15,
+    paddingBottom: 15,
+  },
+  title: {
+    maxWidth: 200,
+    textAlign: 'center',
+    fontSize: font.sizeSub,
+    lineHeight: font.lineHeightSub,
+    letterSpacing: 1,
+  },
+  titleIcon: {
+    marginTop: 10,
+  },
+});
+
+export const LargeTitle = ({ title = '', style, children }) => (
+  <View style={largeTitleStyles.titleWrapper}>
+    {children}
+    <Text
+      style={[
+        largeTitleStyles.title,
+        children ? largeTitleStyles.titleIcon : null,
+        style,
+      ]}
+    >
+      {title}
+    </Text>
+  </View>
+);
+
+LargeTitle.propTypes = {
+  title: PropTypes.string,
+  style: Text.propTypes.style,
+  children: PropTypes.node,
+};
+
 export default Header;

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,7 @@ 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 SetPinView from './set-pin-mobile';
 import SetPinConfirmView from './set-pin-confirm-mobile';
 import SeedSuccessView from './seed-success-mobile';
@@ -59,9 +60,9 @@ const Welcome = () => <WelcomeView />;
 
 const Loader = () => <LoaderView />;
 
-const SelectSeed = () => (
-  <SelectSeedView store={store} wallet={wallet} nav={nav} />
-);
+const SelectSeed = () => <SelectSeedView store={store} wallet={wallet} />;
+
+const Seed = () => <SeedView store={store} wallet={wallet} />;
 
 const SeedIntro = () => <SeedIntroView nav={nav} />;
 
@@ -167,6 +168,7 @@ const MainStack = createStackNavigator(
     Loader,
     SelectSeed,
     SeedIntro,
+    Seed,
     SetPassword,
     SetPasswordConfirm,
     SeedSuccess,

src/view/seed-mobile.js

@@ -0,0 +1,131 @@
+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 { SplitBackground } from '../component/background';
+import { Header, LargeTitle } from '../component/header';
+import { Button, BackButton, SmallGlasButton } from '../component/button';
+import SeedIcon from '../asset/icon/seed';
+import { color, font } from '../component/style';
+
+//
+// Seed (Mobile) View
+//
+
+const styles = StyleSheet.create({
+  backBtn: {
+    alignSelf: 'flex-start',
+    marginTop: 5,
+  },
+  content: {
+    justifyContent: 'center',
+    backgroundColor: color.blackDark,
+  },
+  pagination: {
+    marginBottom: 10,
+  },
+});
+
+const SeedView = ({ store, wallet }) => (
+  <SplitBackground image="purple-gradient-bg" bottom={color.blackDark}>
+    <Header>
+      <BackButton
+        style={styles.backBtn}
+        onPress={() => wallet.initPrevSeedPage()}
+      />
+      <LargeTitle title="Write down each word and store it in a safe place.">
+        <SeedIcon height={44} width={37} />
+      </LargeTitle>
+      <Button disabled onPress={() => {}} />
+    </Header>
+    <MainContent style={styles.content}>
+      <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>
+    </MainContent>
+    <SmallGlasButton onPress={() => wallet.initNextSeedPage()}>
+      Next
+    </SmallGlasButton>
+  </SplitBackground>
+);
+
+SeedView.propTypes = {
+  store: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+};
+
+//
+// Word List
+//
+
+const listStyles = StyleSheet.create({
+  wrapper: {
+    justifyContent: 'center',
+    maxWidth: 350,
+    margin: 20,
+  },
+  words: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+});
+
+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: 8,
+    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);