From f309848db383e1a2da8403170042314cdc2bfc1e Mon Sep 17 00:00:00 2001
From: Valentine Wallace <vwallace@protonmail.com>
Date: Thu, 29 Nov 2018 22:53:07 +0000
Subject: [PATCH 1/6] Implement Seed Verify (Mobile).

---
 src/view/seed-verify-mobile.js | 81 ++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/view/seed-verify-mobile.js

diff --git a/src/view/seed-verify-mobile.js b/src/view/seed-verify-mobile.js
new file mode 100644
index 000000000..9100ca523
--- /dev/null
+++ b/src/view/seed-verify-mobile.js
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import SeedEntry from '../component/seed-entry';
+import { Button, BackButton, GlasButton } 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';
+
+//
+// Seed Verify View
+//
+
+const styles = StyleSheet.create({
+  content: {
+    justifyContent: 'flex-end',
+  },
+  title: {
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+});
+
+class SeedVerifyView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focusedInput: 0,
+    };
+  }
+
+  render() {
+    const { store, nav, wallet } = this.props;
+    return (
+      <Background image="purple-gradient-bg">
+        <Header>
+          <BackButton onPress={() => nav.goSeed()} />
+          <Button disabled onPress={() => {}} />
+        </Header>
+        <MainContent style={styles.content}>
+          <View>
+            <CopyOnboardText style={styles.title}>
+              {"Let's double check"}
+            </CopyOnboardText>
+          </View>
+          <Card>
+            <FormSubText>{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 === this.state.focusedInput}
+                onSubmitEditing={() =>
+                  i === 2
+                    ? wallet.checkSeed()
+                    : this.setState({ focusedInput: i + 1 })
+                }
+                onClick={() => this.setState({ focusedInput: i })}
+              />
+            ))}
+          </Card>
+          <GlasButton onPress={() => wallet.checkSeed()}>Next</GlasButton>
+        </MainContent>
+      </Background>
+    );
+  }
+}
+
+SeedVerifyView.propTypes = {
+  store: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+};
+
+export default observer(SeedVerifyView);

From e4127d0c435ae1e466dc1d0b5f382188b7f707d5 Mon Sep 17 00:00:00 2001
From: Valentine Wallace <vwallace@protonmail.com>
Date: Thu, 29 Nov 2018 22:53:24 +0000
Subject: [PATCH 2/6] Wire up SeedVerify view for mobile.

---
 src/action/index-mobile.js | 1 -
 src/view/main-mobile.js    | 8 +++++++-
 stories/screen-story.js    | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/action/index-mobile.js b/src/action/index-mobile.js
index 8e277d656..813538202 100644
--- a/src/action/index-mobile.js
+++ b/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');
diff --git a/src/view/main-mobile.js b/src/view/main-mobile.js
index 1b78f355a..3e6d0d896 100644
--- a/src/view/main-mobile.js
+++ b/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,
diff --git a/stories/screen-story.js b/stories/screen-story.js
index 93a0f3109..a6c3e395a 100644
--- a/stories/screen-story.js
+++ b/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} />
   ))

From e946196137bbe61921b84589fe9fbf944da64894 Mon Sep 17 00:00:00 2001
From: Tankred Hase <mail@tankredhase.de>
Date: Fri, 11 Jan 2019 12:23:14 +0700
Subject: [PATCH 3/6] =?UTF-8?q?Don=E2=80=99t=20use=20auto=20focus=20state?=
 =?UTF-8?q?=20in=20seed-verify-mobile=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/seed-verify-mobile.js | 84 +++++++++++++++-------------------
 1 file changed, 36 insertions(+), 48 deletions(-)

diff --git a/src/view/seed-verify-mobile.js b/src/view/seed-verify-mobile.js
index 9100ca523..a4e768df5 100644
--- a/src/view/seed-verify-mobile.js
+++ b/src/view/seed-verify-mobile.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
@@ -12,7 +12,7 @@ import { Header } from '../component/header';
 import Card from '../component/card';
 
 //
-// Seed Verify View
+// Seed Verify View (Mobile)
 //
 
 const styles = StyleSheet.create({
@@ -25,52 +25,40 @@ const styles = StyleSheet.create({
   },
 });
 
-class SeedVerifyView extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      focusedInput: 0,
-    };
-  }
-
-  render() {
-    const { store, nav, wallet } = this.props;
-    return (
-      <Background image="purple-gradient-bg">
-        <Header>
-          <BackButton onPress={() => nav.goSeed()} />
-          <Button disabled onPress={() => {}} />
-        </Header>
-        <MainContent style={styles.content}>
-          <View>
-            <CopyOnboardText style={styles.title}>
-              {"Let's double check"}
-            </CopyOnboardText>
-          </View>
-          <Card>
-            <FormSubText>{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 === this.state.focusedInput}
-                onSubmitEditing={() =>
-                  i === 2
-                    ? wallet.checkSeed()
-                    : this.setState({ focusedInput: i + 1 })
-                }
-                onClick={() => this.setState({ focusedInput: i })}
-              />
-            ))}
-          </Card>
-          <GlasButton onPress={() => wallet.checkSeed()}>Next</GlasButton>
-        </MainContent>
-      </Background>
-    );
-  }
-}
+const SeedVerifyView = ({ store, nav, wallet }) => (
+  <Background image="purple-gradient-bg">
+    <Header>
+      <BackButton onPress={() => nav.goSeed()} />
+      <Button disabled onPress={() => {}} />
+    </Header>
+    <MainContent style={styles.content}>
+      <View>
+        <CopyOnboardText style={styles.title}>
+          {"Let's double check"}
+        </CopyOnboardText>
+      </View>
+      <Card>
+        <FormSubText>{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}
+            onSubmitEditing={() =>
+              i === 2
+                ? wallet.checkSeed()
+                : this.setState({ focusedInput: i + 1 })
+            }
+            onClick={() => this.setState({ focusedInput: i })}
+          />
+        ))}
+      </Card>
+      <GlasButton onPress={() => wallet.checkSeed()}>Next</GlasButton>
+    </MainContent>
+  </Background>
+);
 
 SeedVerifyView.propTypes = {
   store: PropTypes.object.isRequired,

From 0b8368ec9291e604c5b2e2d49ffa14d692824ac3 Mon Sep 17 00:00:00 2001
From: Tankred Hase <mail@tankredhase.de>
Date: Fri, 11 Jan 2019 15:29:10 +0700
Subject: [PATCH 4/6] Remove focusedInput state handling

---
 src/view/seed-verify-mobile.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/view/seed-verify-mobile.js b/src/view/seed-verify-mobile.js
index a4e768df5..61c691417 100644
--- a/src/view/seed-verify-mobile.js
+++ b/src/view/seed-verify-mobile.js
@@ -46,12 +46,6 @@ const SeedVerifyView = ({ store, nav, wallet }) => (
             onChangeText={word => wallet.setSeedVerify({ word, index: i })}
             key={i}
             autoFocus={i === 0}
-            onSubmitEditing={() =>
-              i === 2
-                ? wallet.checkSeed()
-                : this.setState({ focusedInput: i + 1 })
-            }
-            onClick={() => this.setState({ focusedInput: i })}
           />
         ))}
       </Card>

From a0412e3485f9c6f52d568a4e88d5b56c07fb9f14 Mon Sep 17 00:00:00 2001
From: Tankred Hase <mail@tankredhase.de>
Date: Fri, 11 Jan 2019 15:32:28 +0700
Subject: [PATCH 5/6] Add responsive styles to seed-verify-mobile view

---
 src/view/seed-verify-mobile.js | 35 +++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/view/seed-verify-mobile.js b/src/view/seed-verify-mobile.js
index 61c691417..0b4b7da5a 100644
--- a/src/view/seed-verify-mobile.js
+++ b/src/view/seed-verify-mobile.js
@@ -1,21 +1,22 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import SeedEntry from '../component/seed-entry';
-import { Button, BackButton, GlasButton } from '../component/button';
+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 styles = StyleSheet.create({
+const baseStyles = {
   content: {
     justifyContent: 'flex-end',
   },
@@ -23,7 +24,21 @@ const styles = StyleSheet.create({
     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">
@@ -32,13 +47,11 @@ const SeedVerifyView = ({ store, nav, wallet }) => (
       <Button disabled onPress={() => {}} />
     </Header>
     <MainContent style={styles.content}>
-      <View>
-        <CopyOnboardText style={styles.title}>
-          {"Let's double check"}
-        </CopyOnboardText>
-      </View>
+      <CopyOnboardText style={styles.title}>
+        {"Let's double check"}
+      </CopyOnboardText>
       <Card>
-        <FormSubText>{store.seedVerifyCopy}</FormSubText>
+        <FormSubText style={styles.subText}>{store.seedVerifyCopy}</FormSubText>
         {store.seedVerifyIndexes.map((seedIndex, i) => (
           <SeedEntry
             seedIndex={seedIndex}
@@ -49,7 +62,7 @@ const SeedVerifyView = ({ store, nav, wallet }) => (
           />
         ))}
       </Card>
-      <GlasButton onPress={() => wallet.checkSeed()}>Next</GlasButton>
+      <SmallGlasButton onPress={() => wallet.checkSeed()}>Next</SmallGlasButton>
     </MainContent>
   </Background>
 );

From 0c92bd186669e6ce64dac258cd1fefbe744c136d Mon Sep 17 00:00:00 2001
From: Tankred Hase <mail@tankredhase.de>
Date: Fri, 11 Jan 2019 15:36:12 +0700
Subject: [PATCH 6/6] Add responsive styles for seed-entry

---
 src/component/seed-entry.js | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/component/seed-entry.js b/src/component/seed-entry.js
index 9202e2de0..fe56865f8 100644
--- a/src/component/seed-entry.js
+++ b/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>
 );