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