Implement Restore Wallet: Seed view for mobile and hook it up.

Author: valentinewallace

src/view/main-mobile.js

@@ -16,6 +16,7 @@ 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';
+import RestoreSeedView from './restore-seed-mobile';
 import NewAddressView from './new-address-mobile';
 
 import PinView from './pin-mobile';
@@ -84,6 +85,8 @@ const SetPasswordConfirm = () => (
 
 const SeedSuccess = () => <SeedSuccessView wallet={wallet} />;
 
+const RestoreSeed = () => <RestoreSeedView store={store} wallet={wallet} />;
+
 const NewAddress = () => (
   <NewAddressView store={store} invoice={invoice} info={info} />
 );
@@ -190,6 +193,7 @@ const MainStack = createStackNavigator(
     SetPassword,
     SetPasswordConfirm,
     SeedSuccess,
+    RestoreSeed,
     NewAddress,
     Password,
     LoaderSyncing,

src/view/restore-seed-mobile.js

@@ -0,0 +1,101 @@
+import React, { Component } 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';
+
+//
+// Restore Seed 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,
+    },
+  })
+);
+
+class RestoreSeedView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focusedInput: 0,
+    };
+  }
+
+  render() {
+    const { store, wallet } = this.props;
+    return (
+      <Background image="purple-gradient-bg">
+        <Header>
+          <BackButton onPress={() => wallet.initPrevRestorePage()} />
+          <Button disabled onPress={() => {}} />
+        </Header>
+        <MainContent style={styles.content}>
+          <CopyOnboardText style={styles.title}>
+            {'Restore your wallet'}
+          </CopyOnboardText>
+          <Card>
+            <FormSubText style={styles.subText}>
+              {store.restoreVerifyCopy}
+            </FormSubText>
+            {store.restoreVerifyIndexes.map((seedIndex, i) => (
+              <SeedEntry
+                seedIndex={seedIndex}
+                value={store.wallet.restoreSeed[seedIndex - 1]}
+                onChangeText={word =>
+                  wallet.setRestoreSeed({ word, index: seedIndex - 1 })
+                }
+                key={i}
+                autoFocus={seedIndex - 1 === store.wallet.focusedRestoreInd}
+                onSubmitEditing={() =>
+                  i === 2
+                    ? wallet.initNextRestorePage()
+                    : wallet.setFocusedRestoreInd({ index: seedIndex })
+                }
+                onClick={() =>
+                  wallet.setFocusedRestoreInd({ index: seedIndex - 1 })
+                }
+              />
+            ))}
+          </Card>
+          <SmallGlasButton onPress={() => wallet.initNextRestorePage()}>
+            Next
+          </SmallGlasButton>
+        </MainContent>
+      </Background>
+    );
+  }
+}
+
+RestoreSeedView.propTypes = {
+  store: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+};
+
+export default observer(RestoreSeedView);

stories/screen-story.js

@@ -82,6 +82,7 @@ import NewAddressMobile from '../src/view/new-address-mobile';
 import Wait from '../src/view/wait';
 import WaitMobile from '../src/view/wait-mobile';
 import RestoreSeed from '../src/view/restore-seed';
+import RestoreSeedMobile from '../src/view/restore-seed-mobile';
 
 const store = new Store();
 store.init();
@@ -138,6 +139,9 @@ storiesOf('Screens', module)
   .add('Restore Wallet: Seed', () => (
     <RestoreSeed store={store} wallet={wallet} />
   ))
+  .add('Restore Wallet: Seed (Mobile)', () => (
+    <RestoreSeedMobile store={store} wallet={wallet} />
+  ))
   .add('Seed Success', () => <SeedSuccess wallet={wallet} />)
   .add('Seed Success (Mobile)', () => <SeedSuccessMobile wallet={wallet} />)
   .add('Set Password', () => (