diff --git a/src/action/nav-mobile.js b/src/action/nav-mobile.js
index 4a7078de6..9312cffbb 100644
--- a/src/action/nav-mobile.js
+++ b/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');
diff --git a/src/component/setting.js b/src/component/setting.js
index dd07b69dc..bcc68c74a 100644
--- a/src/component/setting.js
+++ b/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 }) => (
+
+
+ {name}
+ {copy}
+
+ {children}
+
+);
+
+SettingCopyItem.propTypes = {
+ name: PropTypes.string.isRequired,
+ onSelect: PropTypes.func,
+ copy: PropTypes.string,
+ children: PropTypes.node,
+};
+
//
// Setting Header
//
diff --git a/src/view/main-mobile.js b/src/view/main-mobile.js
index 981437f16..7e9a2dee1 100644
--- a/src/view/main-mobile.js
+++ b/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 = () => ;
const RestoreSeed = () => ;
const NewAddress = () => (
-
+
+);
+
+const SelectAutopilot = () => (
+
);
const Password = () => ;
@@ -212,6 +217,7 @@ const MainStack = createStackNavigator(
SeedSuccess,
RestoreSeed,
NewAddress,
+ SelectAutopilot,
Password,
LoaderSyncing,
Home,
diff --git a/src/view/new-address-mobile.js b/src/view/new-address-mobile.js
index deb32cc79..e87975777 100644
--- a/src/view/new-address-mobile.js
+++ b/src/view/new-address-mobile.js
@@ -59,7 +59,7 @@ const styles = createStyles(
})
);
-const NewAddressView = ({ store, invoice, info }) => (
+const NewAddressView = ({ store, invoice, nav }) => (
@@ -80,7 +80,7 @@ const NewAddressView = ({ store, invoice, info }) => (
>
{store.walletAddress}
- info.initLoaderSyncing()}>
+ nav.goSelectAutopilot()}>
Done
@@ -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);
diff --git a/src/view/select-atpl-mobile.js b/src/view/select-atpl-mobile.js
new file mode 100644
index 000000000..760352156
--- /dev/null
+++ b/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 }) => (
+
+
+
+ Automatically set up channels?
+
+
+ {
+ "If you want to avoid manual channel creation, the app can allocate funds to channels for you. It's called autopilot."
+ }
+
+
+ !store.settings.autopilot && autopilot.toggle()}
+ >
+
+
+ store.settings.autopilot && autopilot.toggle()}
+ >
+
+
+
+
+ info.initLoaderSyncing()}>Save
+
+);
+
+SelectAutopilotView.propTypes = {
+ store: PropTypes.object.isRequired,
+ autopilot: PropTypes.object.isRequired,
+ info: PropTypes.object.isRequired,
+};
+
+export default observer(SelectAutopilotView);
diff --git a/stories/screen-story.js b/stories/screen-story.js
index f32695265..3ec7a4a46 100644
--- a/stories/screen-story.js
+++ b/stories/screen-story.js
@@ -5,6 +5,7 @@ import { action } from '@storybook/addon-actions';
import sinon from 'sinon';
import { Store } from '../src/store';
import NavAction from '../src/action/nav';
+import NavActionMobile from '../src/action/nav-mobile';
import IpcAction from '../src/action/ipc';
import GrpcAction from '../src/action/grpc';
import InfoAction from '../src/action/info';
@@ -84,6 +85,7 @@ import ResetPinConfirm from '../src/view/reset-pin-confirm-mobile';
import ResetPinSaved from '../src/view/reset-pin-saved-mobile';
import NewAddress from '../src/view/new-address';
import NewAddressMobile from '../src/view/new-address-mobile';
+import SelectAutopilotMobile from '../src/view/select-atpl-mobile';
import Wait from '../src/view/wait';
import WaitMobile from '../src/view/wait-mobile';
import RestoreSeed from '../src/view/restore-seed';
@@ -93,6 +95,7 @@ const store = new Store();
store.init();
const file = sinon.createStubInstance(FileAction);
const nav = sinon.createStubInstance(NavAction);
+const navMobile = sinon.createStubInstance(NavActionMobile);
const db = sinon.createStubInstance(AppStorage);
const ipc = sinon.createStubInstance(IpcAction);
const grpc = sinon.createStubInstance(GrpcAction);
@@ -133,14 +136,14 @@ storiesOf('Screens', module)
.add('Select Seed', () => (
))
- .add('Seed Intro (Mobile)', () => )
+ .add('Seed Intro (Mobile)', () => )
.add('Seed', () => )
.add('Seed (Mobile)', () => )
.add('Seed Verify', () => (
))
.add('Seed Verify (Mobile)', () => (
-
+
))
.add('Restore Wallet: Seed', () => (
@@ -157,7 +160,7 @@ storiesOf('Screens', module)
))
.add('Set PIN (Mobile)', () => (
-
+
))
.add('Set PIN Confirm (Mobile)', () => (
@@ -175,7 +178,7 @@ storiesOf('Screens', module)
))
.add('Reset Password - Saved', () => )
.add('Reset PIN - Current (Mobile)', () => (
-
+
))
.add('Reset PIN - New (Mobile)', () => (
@@ -183,12 +186,15 @@ storiesOf('Screens', module)
.add('Reset PIN - Confirm New (Mobile)', () => (
))
- .add('Reset PIN - Saved (Mobile)', () => )
+ .add('Reset PIN - Saved (Mobile)', () => )
.add('New Address', () => (
))
.add('New Address (Mobile)', () => (
-
+
+ ))
+ .add('Select Autopilot (Mobile)', () => (
+
))
.add('Loader - Syncing Chain', () => )
.add('Loader - Syncing Chain (Mobile)', () => (
@@ -218,24 +224,28 @@ storiesOf('Screens', module)
))
.add('Notifications', () => )
.add('Notifications (Mobile)', () => (
-
+
))
.add('CLI', () => )
.add('Transactions', () => (
))
.add('Transactions (Mobile)', () => (
-
+
))
.add('Transaction Details', () => (
))
.add('Transaction Details (Mobile)', () => (
-
+
))
.add('Channels', () => )
.add('Channels (Mobile)', () => (
-
+
))
.add('Channels (Opening)', () => (
@@ -244,12 +254,12 @@ storiesOf('Screens', module)
))
.add('Channel Details', () => )
.add('Channel Details (Mobile)', () => (
-
+
))
.add('Channel Delete', () => (
@@ -258,54 +268,58 @@ storiesOf('Screens', module)
))
.add('Channel Create (Mobile)', () => (
-
+
))
.add('Deposit', () => )
.add('Deposit (Mobile)', () => (
-
+
))
.add('Payment', () => )
.add('Pay Lightning Confirm', () => (
))
.add('Pay Lightning Confirm (Mobile)', () => (
-
+
))
.add('Pay Lightning Done', () => (
))
.add('Pay Lightning Done (Mobile)', () => (
-
+
))
.add('Payment Failed', () => )
.add('Payment Failed (Mobile)', () => (
-
+
))
.add('Pay Bitcoin', () => (
))
.add('Pay Bitcoin (Mobile)', () => (
-
+
))
.add('Pay Bitcoin Confirm', () => (
))
.add('Pay Bitcoin Confirm (Mobile)', () => (
-
+
))
.add('Pay Bitcoin Done', () => )
.add('Pay Bitcoin Done (Mobile)', () => (
-
+
))
.add('Invoice', () => )
.add('Invoice (Mobile)', () => (
-
+
))
.add('Invoice QR', () => (
))
.add('Invoice QR (Mobile)', () => (
-
+
));
// set some dummy data