Merge pull request #1258 from lightninglabs/dev/atpl-choice-setup

Select autopilot during wallet setup.

Author: tanx

src/action/nav-mobile.js

@@ -97,6 +97,10 @@ class NavAction {
     this._navigate('NewAddress');
   }
 
+  goSelectAutopilot() {
+    this._navigate('SelectAutopilot');
+  }
+
   goLoaderSyncing() {
     this._navigate('LoaderSyncing');
     this._reset('Main', 'LoaderSyncing');

src/component/setting.js

@@ -121,6 +121,50 @@ SettingItem.propTypes = {
   children: PropTypes.node,
 };
 
+//
+// Setting Copy Item
+//
+
+const iCopyStyles = StyleSheet.create({
+  item: {
+    height: null,
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+  left: {
+    flex: 1,
+  },
+  name: {
+    color: color.grey,
+    fontSize: font.sizeSub,
+  },
+  copy: {
+    fontSize: font.sizeS,
+    lineHeight: font.lineHeightS,
+    color: color.greyListLabel,
+    opacity: 0.74,
+    paddingRight: 50,
+    marginTop: 5,
+  },
+});
+
+export const SettingCopyItem = ({ name, onSelect, copy, children }) => (
+  <ListItem style={iCopyStyles.item} onSelect={onSelect}>
+    <View style={iCopyStyles.left}>
+      <Text style={iCopyStyles.name}>{name}</Text>
+      <Text style={iCopyStyles.copy}>{copy}</Text>
+    </View>
+    {children}
+  </ListItem>
+);
+
+SettingCopyItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  onSelect: PropTypes.func,
+  copy: PropTypes.string,
+  children: PropTypes.node,
+};
+
 //
 // Setting Header
 //

src/view/main-mobile.js

@@ -18,6 +18,7 @@ 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 SelectAutopilotView from './select-atpl-mobile';
 
 import PinView from './pin-mobile';
 import ResetPinCurrentView from './reset-pin-current-mobile';
@@ -93,7 +94,11 @@ const SeedSuccess = () => <SeedSuccessView wallet={wallet} />;
 const RestoreSeed = () => <RestoreSeedView store={store} wallet={wallet} />;
 
 const NewAddress = () => (
-  <NewAddressView store={store} invoice={invoice} info={info} />
+  <NewAddressView store={store} invoice={invoice} nav={nav} />
+);
+
+const SelectAutopilot = () => (
+  <SelectAutopilotView store={store} autopilot={autopilot} info={info} />
 );
 
 const Password = () => <PinView store={store} auth={auth} />;
@@ -212,6 +217,7 @@ const MainStack = createStackNavigator(
     SeedSuccess,
     RestoreSeed,
     NewAddress,
+    SelectAutopilot,
     Password,
     LoaderSyncing,
     Home,

src/view/new-address-mobile.js

@@ -59,7 +59,7 @@ const styles = createStyles(
   })
 );
 
-const NewAddressView = ({ store, invoice, info }) => (
+const NewAddressView = ({ store, invoice, nav }) => (
   <SplitBackground image="purple-gradient-bg" bottom={color.blackDark}>
     <MainContent style={styles.content}>
       <View style={styles.copyWrapper}>
@@ -80,7 +80,7 @@ const NewAddressView = ({ store, invoice, info }) => (
         >
           {store.walletAddress}
         </CopyButton>
-        <SmallGlasButton onPress={() => info.initLoaderSyncing()}>
+        <SmallGlasButton onPress={() => nav.goSelectAutopilot()}>
           Done
         </SmallGlasButton>
       </View>
@@ -96,7 +96,7 @@ const NewAddressView = ({ store, invoice, info }) => (
 NewAddressView.propTypes = {
   store: PropTypes.object.isRequired,
   invoice: PropTypes.object.isRequired,
-  info: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
 };
 
 export default observer(NewAddressView);

src/view/select-atpl-mobile.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createStyles, maxWidth } from '../component/media-query';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import Background from '../component/background';
+import MainContent from '../component/main-content';
+import { CopyOnboardText, Text } from '../component/text';
+import { RadioButton, GlasButton } from '../component/button';
+import { SettingCopyItem } from '../component/setting';
+import { color, font, smallBreakWidth } from '../component/style';
+
+//
+// Select Autopilot View
+//
+
+const baseStyles = {
+  content: {
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  title: {
+    marginTop: 80,
+    textAlign: 'center',
+  },
+  copyTxt: {
+    textAlign: 'center',
+    marginTop: 20,
+    maxWidth: 260,
+  },
+  list: {
+    marginTop: 40,
+    width: undefined,
+    alignSelf: 'stretch',
+  },
+};
+
+const styles = createStyles(
+  baseStyles,
+
+  maxWidth(smallBreakWidth, {
+    title: {
+      fontSize: font.sizeL + 10,
+      lineHeight: font.sizeL + 10,
+      marginTop: 40,
+    },
+    list: {
+      marginTop: 50,
+    },
+  })
+);
+
+const SelectAutopilotView = ({ store, autopilot, info }) => (
+  <Background color={color.blackDark}>
+    <MainContent style={styles.content}>
+      <CopyOnboardText style={styles.title}>
+        Automatically set up channels?
+      </CopyOnboardText>
+      <Text style={styles.copyTxt}>
+        {
+          "If you want to avoid manual channel creation, the app can allocate funds to channels for you. It's called autopilot."
+        }
+      </Text>
+      <View style={styles.list}>
+        <SettingCopyItem
+          name="Use autopilot (recommended)"
+          copy="I want the app to create channels and move my funds into those channels automatically."
+          onSelect={() => !store.settings.autopilot && autopilot.toggle()}
+        >
+          <RadioButton selected={store.settings.autopilot === true} />
+        </SettingCopyItem>
+        <SettingCopyItem
+          name="Create channels manually"
+          copy="I don't want the app to automatically create channels for me. I can do this all myself."
+          onSelect={() => store.settings.autopilot && autopilot.toggle()}
+        >
+          <RadioButton selected={store.settings.autopilot === false} />
+        </SettingCopyItem>
+      </View>
+    </MainContent>
+    <GlasButton onPress={() => info.initLoaderSyncing()}>Save</GlasButton>
+  </Background>
+);
+
+SelectAutopilotView.propTypes = {
+  store: PropTypes.object.isRequired,
+  autopilot: PropTypes.object.isRequired,
+  info: PropTypes.object.isRequired,
+};
+
+export default observer(SelectAutopilotView);