Seed verify mobile rebased

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');

src/component/seed-entry.js

@@ -1,22 +1,23 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import { Text } from '../component/text';
 import { InputField } from '../component/field';
-import { color, font } from '../component/style';
+import { createStyles, maxWidth } from '../component/media-query';
+import { color, font, breakWidth } from '../component/style';
 
 //
 // Seed Entry
 //
 
-const entryStyles = StyleSheet.create({
+const baseStyles = {
   wrapper: {
     alignSelf: 'stretch',
     flexDirection: 'row',
     alignItems: 'center',
     marginTop: 40,
     borderBottomColor: color.greyText,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1,
   },
   index: {
     color: color.greyText,
@@ -29,12 +30,25 @@ const entryStyles = StyleSheet.create({
     textAlign: 'left',
     borderBottomWidth: 0,
   },
-});
+};
+
+const styles = createStyles(
+  baseStyles,
+
+  maxWidth(breakWidth, {
+    wrapper: {
+      marginTop: 20,
+    },
+    input: {
+      height: font.lineHeightM + 2 * 6,
+    },
+  })
+);
 
 const SeedEntry = ({ seedIndex, ...props }) => (
-  <View style={entryStyles.wrapper}>
-    <Text style={entryStyles.index}>{seedIndex}.</Text>
-    <InputField style={entryStyles.input} {...props} />
+  <View style={styles.wrapper}>
+    <Text style={styles.index}>{seedIndex}.</Text>
+    <InputField style={styles.input} {...props} />
   </View>
 );
 

src/view/main-mobile.js

@@ -11,6 +11,7 @@ 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';
@@ -62,9 +63,13 @@ const Loader = () => <LoaderView />;
 
 const SelectSeed = () => <SelectSeedView store={store} wallet={wallet} />;
 
+const SeedIntro = () => <SeedIntroView nav={nav} />;
+
 const Seed = () => <SeedView store={store} wallet={wallet} />;
 
-const SeedIntro = () => <SeedIntroView nav={nav} />;
+const SeedVerify = () => (
+  <SeedVerifyView store={store} nav={nav} wallet={wallet} />
+);
 
 const SetPassword = () => <SetPinView store={store} auth={auth} nav={nav} />;
 
@@ -169,6 +174,7 @@ const MainStack = createStackNavigator(
     SelectSeed,
     SeedIntro,
     Seed,
+    SeedVerify,
     SetPassword,
     SetPasswordConfirm,
     SeedSuccess,

src/view/seed-verify-mobile.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import SeedEntry from '../component/seed-entry';
+import { Button, BackButton, SmallGlasButton } from '../component/button';
+import { FormSubText } from '../component/form';
+import Background from '../component/background';
+import MainContent from '../component/main-content';
+import { CopyOnboardText } from '../component/text';
+import { Header } from '../component/header';
+import Card from '../component/card';
+import { createStyles, maxWidth } from '../component/media-query';
+import { smallBreakWidth } from '../component/style';
+
+//
+// Seed Verify View (Mobile)
+//
+
+const baseStyles = {
+  content: {
+    justifyContent: 'flex-end',
+  },
+  title: {
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  subText: {
+    maxWidth: 235,
+  },
+};
+
+const styles = createStyles(
+  baseStyles,
+
+  maxWidth(smallBreakWidth, {
+    title: {
+      fontSize: 30,
+      lineHeight: 40,
+    },
+  })
+);
+
+const SeedVerifyView = ({ store, nav, wallet }) => (
+  <Background image="purple-gradient-bg">
+    <Header>
+      <BackButton onPress={() => nav.goSeed()} />
+      <Button disabled onPress={() => {}} />
+    </Header>
+    <MainContent style={styles.content}>
+      <CopyOnboardText style={styles.title}>
+        {"Let's double check"}
+      </CopyOnboardText>
+      <Card>
+        <FormSubText style={styles.subText}>{store.seedVerifyCopy}</FormSubText>
+        {store.seedVerifyIndexes.map((seedIndex, i) => (
+          <SeedEntry
+            seedIndex={seedIndex}
+            value={store.wallet.seedVerify[i]}
+            onChangeText={word => wallet.setSeedVerify({ word, index: i })}
+            key={i}
+            autoFocus={i === 0}
+          />
+        ))}
+      </Card>
+      <SmallGlasButton onPress={() => wallet.checkSeed()}>Next</SmallGlasButton>
+    </MainContent>
+  </Background>
+);
+
+SeedVerifyView.propTypes = {
+  store: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+};
+
+export default observer(SeedVerifyView);

stories/screen-story.js

@@ -65,6 +65,7 @@ import SeedSuccessMobile from '../src/view/seed-success-mobile';
 import Seed from '../src/view/seed';
 import SeedMobile from '../src/view/seed-mobile';
 import SeedVerify from '../src/view/seed-verify';
+import SeedVerifyMobile from '../src/view/seed-verify-mobile';
 import SetPassword from '../src/view/set-password';
 import SetPinMobile from '../src/view/set-pin-mobile';
 import SetPasswordConfirm from '../src/view/set-password-confirm';
@@ -126,6 +127,9 @@ storiesOf('Screens', module)
   .add('Seed Verify', () => (
     <SeedVerify store={store} nav={nav} wallet={wallet} />
   ))
+  .add('Seed Verify (Mobile)', () => (
+    <SeedVerifyMobile store={store} nav={nav} wallet={wallet} />
+  ))
   .add('Restore Wallet: Seed', () => (
     <RestoreSeed store={store} wallet={wallet} />
   ))