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/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 }) => ( - - {seedIndex}. - + + {seedIndex}. + ); 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 = () => ; const SelectSeed = () => ; +const SeedIntro = () => ; + const Seed = () => ; -const SeedIntro = () => ; +const SeedVerify = () => ( + +); const SetPassword = () => ; @@ -169,6 +174,7 @@ const MainStack = createStackNavigator( SelectSeed, SeedIntro, Seed, + SeedVerify, SetPassword, SetPasswordConfirm, SeedSuccess, diff --git a/src/view/seed-verify-mobile.js b/src/view/seed-verify-mobile.js new file mode 100644 index 000000000..0b4b7da5a --- /dev/null +++ b/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 }) => ( + +
+ nav.goSeed()} /> +
+ + + {"Let's double check"} + + + {store.seedVerifyCopy} + {store.seedVerifyIndexes.map((seedIndex, i) => ( + wallet.setSeedVerify({ word, index: i })} + key={i} + autoFocus={i === 0} + /> + ))} + + wallet.checkSeed()}>Next + +
+); + +SeedVerifyView.propTypes = { + store: PropTypes.object.isRequired, + nav: PropTypes.object.isRequired, + wallet: PropTypes.object.isRequired, +}; + +export default observer(SeedVerifyView); 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', () => ( )) + .add('Seed Verify (Mobile)', () => ( + + )) .add('Restore Wallet: Seed', () => ( ))