From de4379aecaa99a74e84269afe3338162fe2db3f6 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Fri, 9 Feb 2018 13:51:39 -0600 Subject: [PATCH 1/8] feature(syncing): redid sync screen --- app/components/LndSyncing/LndSyncing.js | 83 -------- app/components/LndSyncing/LndSyncing.scss | 242 ---------------------- app/components/LndSyncing/index.js | 3 - app/components/Onboarding/Syncing.js | 45 ++++ app/components/Onboarding/Syncing.scss | 50 +++++ app/containers/Root.js | 7 +- app/variables.scss | 1 + 7 files changed, 100 insertions(+), 331 deletions(-) delete mode 100644 app/components/LndSyncing/LndSyncing.js delete mode 100644 app/components/LndSyncing/LndSyncing.scss delete mode 100644 app/components/LndSyncing/index.js create mode 100644 app/components/Onboarding/Syncing.js create mode 100644 app/components/Onboarding/Syncing.scss diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js deleted file mode 100644 index ba8cbdc9..00000000 --- a/app/components/LndSyncing/LndSyncing.js +++ /dev/null @@ -1,83 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import styles from './LndSyncing.scss' - - -class LndSyncing extends Component { - constructor(props) { - super(props) - this.state = { - facts: [ - { - title: 'The Lightning Network', - description: 'The Lightning Network is a second layer solution built on top of the Bitcoin block chain that attempts to increase Bitcoin\'s scalability and privacy' // eslint-disable-line max-len - }, - { - title: 'Payment Channel', - description: 'A payment channel is a class of techniques designed to allow users to make multiple Bitcoin transactions without commiting all of the transactions to the Bitcoin block chain. You can think of payment channels like tubes of money' // eslint-disable-line max-len - }, - { - title: 'HTLC', - description: 'Hashed TimeLock Contracts is a class of payments that use hashlocks and timelocks to require the receiver of a payment either acknowledge receiving the payment before a deadline or forfeit the ability to claim the payment. HTLCs are useful within the Lightning Network for routing payments across two or more payment channels' // eslint-disable-line max-len - }, - { - title: 'Onion Routing', - description: 'Onion routing is a technique for anonymous communication over a computer network. In an onion network, messages are encapsulated in layers of encryption, analogous to layers of an onion.' // eslint-disable-line max-len - } - ], - currentFact: 0 - } - } - - componentWillMount() { - this.props.fetchBlockHeight() - } - - render() { - const { syncPercentage } = this.props - const { facts, currentFact } = this.state - const renderCurrentFact = facts[currentFact] - - return ( -
-
-
-

zap

-
-
-

{syncPercentage.toString().length > 0 && `${syncPercentage}%`}

-
-
-
- -
-
-

{renderCurrentFact.title}

-

{renderCurrentFact.description}

-
-
    - { - facts.map((fact, index) => ( -
  • this.setState({ currentFact: index })} - /> - )) - } -
-
-
- ) - } -} - -LndSyncing.propTypes = { - fetchBlockHeight: PropTypes.func.isRequired, - syncPercentage: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string - ]).isRequired -} - -export default LndSyncing diff --git a/app/components/LndSyncing/LndSyncing.scss b/app/components/LndSyncing/LndSyncing.scss deleted file mode 100644 index 43a3efed..00000000 --- a/app/components/LndSyncing/LndSyncing.scss +++ /dev/null @@ -1,242 +0,0 @@ -@import '../../variables.scss'; - -.container { - height: 100vh; - background: $secondary; - - header { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: top; - padding: 100px; - } - - h3 { - font-size: 50px; - color: $white; - } - - .loading { - text-align: center; - position: relative; - - .spinner, h1 { - display: inline-block; - vertical-align: top; - } - - h4 { - position: absolute; - min-width: 100px; - top: calc(50% - 5px); - left: calc(50% - 48px); - color: $main; - font-size: 10px; - } - - h1 { - color: $main; - line-height: 50px; - margin-left: 20px; - } - } - - .facts { - color: $white; - - .fact { - transition: all 0.25s; - width: 50%; - margin: 0 auto; - text-align: center; - line-height: 1.5; - letter-spacing: 1.1px; - height: 250px; - - h2 { - font-size: 50px; - margin-bottom: 10px; - } - - p { - margin-bottom: 20px; - } - } - } - - .factButtons { - text-align: center; - } - - .factButton { - cursor: pointer; - display: inline-block; - width: 15px; - height: 15px; - background: $white; - opacity: 0.5; - border-radius: 50%; - margin: 0 5px; - - &:hover { - opacity: 0.75; - } - - &.active { - opacity: 1; - } - } -} - -.aliasForm { - width: 50%; - margin: 0 auto; - - h1 { - text-align: center; - font-size: 32px; - color: $white; - } - - p { - color: $darkgrey; - text-align: center; - margin-top: 20px; - font-weight: 100; - } - - .inputContainer { - text-align: center; - margin-top: 50px; - } - - .input { - padding: 20px; - font-size: 18px; - color: $darkestgrey; - background: lighten($black, 15%); - border: none; - outline: 0; - -webkit-appearance: none; - font-weight: 200; - width: calc(100% - 20px); - } - - .submit { - background: $main; - color: $white; - font-size: 18px; - cursor: pointer; - width: 10%; - margin: 50px auto 0 auto; - padding: 20px 60px; - opacity: 0.5; - } -} - -.footer { - position: absolute; - bottom: 0; - width: 100%; - background: darken($secondary, 5%); - white-space: nowrap; - - section { - display: inline-block; - vertical-align: top; - width: 50%; - white-space: normal; - padding: 30px 0; - - h2 { - color: $white; - font-size: 22px; - letter-spacing: 1.2px; - font-weight: bold; - margin-bottom: 20px; - padding: 0 30px; - } - - p { - color: $white; - padding: 0 30px; - line-height: 1.5; - } - } - - .address { - display: flex; - flex-direction: row; - font-family: 'Roboto'; - font-size: 14px; - font-weight: 200; - background: lighten($black, 15%); - color: $darkestgrey; - width: 75%; - margin: 0 auto; - - span { - padding: 20px; - } - - span:nth-child(1) { - flex: 9; - overflow-x: scroll; - font-size: 14px; - } - - span:nth-child(2) { - background: $darkestgrey; - color: $white; - cursor: pointer; - transition: all 0.25s; - - &:hover { - background: $darkestgrey; - } - } - } -} - -.spinner { - border: 1px solid rgba(235, 184, 100, 0.1); - border-left-color: rgba(235, 184, 100, 0.4); - -webkit-border-radius: 999px; - -moz-border-radius: 999px; - border-radius: 999px; -} - -.spinner { - margin: 0 auto; - height: 50px; - width: 50px; - -webkit-animation: animation-rotate 1000ms linear infinite; - -moz-animation: animation-rotate 1000ms linear infinite; - -o-animation: animation-rotate 1000ms linear infinite; - animation: animation-rotate 1000ms linear infinite; -} - -@-webkit-keyframes animation-rotate { - 100% { - -webkit-transform: rotate(360deg); - } -} - -@-moz-keyframes animation-rotate { - 100% { - -moz-transform: rotate(360deg); - } -} - -@-o-keyframes animation-rotate { - 100% { - -o-transform: rotate(360deg); - } -} - -@keyframes animation-rotate { - 100% { - transform: rotate(360deg); - } -} \ No newline at end of file diff --git a/app/components/LndSyncing/index.js b/app/components/LndSyncing/index.js deleted file mode 100644 index 584bcb5e..00000000 --- a/app/components/LndSyncing/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import LndSyncing from './LndSyncing' - -export default LndSyncing diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js new file mode 100644 index 00000000..9448b474 --- /dev/null +++ b/app/components/Onboarding/Syncing.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Isvg from 'react-inlinesvg' +import zapLogo from 'icons/zap_logo.svg' +import styles from './Syncing.scss' + + +class Syncing extends Component { + componentWillMount() { + this.props.fetchBlockHeight() + } + + render() { + const { syncPercentage } = this.props + + return ( +
+
+ +
+
+ +
+
+

Syncing to the blockchain...

+
+
+
+

{syncPercentage.toString().length > 0 && `${syncPercentage}%`}

+
+
+
+ ) + } +} + +Syncing.propTypes = { + fetchBlockHeight: PropTypes.func.isRequired, + syncPercentage: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string + ]).isRequired +} + +export default Syncing diff --git a/app/components/Onboarding/Syncing.scss b/app/components/Onboarding/Syncing.scss new file mode 100644 index 00000000..6ca829a9 --- /dev/null +++ b/app/components/Onboarding/Syncing.scss @@ -0,0 +1,50 @@ +@import '../../variables.scss'; + +.container { + position: relative; + height: 100vh; + background: $spaceblue; +} + +.titleBar { + background: $spacegrey; + height: 20px; + -webkit-user-select: none; + -webkit-app-region: drag; +} + +.content { + padding: 20px 40px; +} + +.progressContainer { + color: $white; + text-align: center; + margin-top: 20%; + + h1 { + margin-bottom: 20px; + } + + .progressBar { + width: 75%; + max-width: 700px; + margin: 0 auto; + height: 10px; + border-radius: 5px; + background: $spaceborder; + } + + .progress { + background: $gold; + background: #DEA326; + height: 10px; + border-radius: 5px; + transition: all 0.25s; + } + + h4 { + color: $gold; + margin-top: 10px; + } +} \ No newline at end of file diff --git a/app/containers/Root.js b/app/containers/Root.js index 9c377f04..44824e75 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -5,7 +5,7 @@ import { ConnectedRouter } from 'react-router-redux' import PropTypes from 'prop-types' import LoadingBolt from '../components/LoadingBolt' -import LndSyncing from '../components/LndSyncing' +import Syncing from '../components/Onboarding/Syncing' import { fetchBlockHeight, lndSelectors } from '../reducers/lnd' import { newAddress } from '../reducers/address' import Routes from '../routes' @@ -32,9 +32,10 @@ const Root = ({ address }) => { // If we are syncing show the syncing screen - if (lnd.syncing) { + // if (lnd.syncing) { + if (true) { return ( - Date: Sat, 10 Feb 2018 18:11:01 -0600 Subject: [PATCH 2/8] feature(alias): setup form container and onboarding architecture. hard code alias form --- app/components/Onboarding/Alias.js | 25 ++++++++ app/components/Onboarding/Alias.scss | 15 +++++ app/components/Onboarding/FormContainer.js | 51 +++++++++++++++ app/components/Onboarding/FormContainer.scss | 67 ++++++++++++++++++++ app/components/Onboarding/Onboarding.js | 52 +++++++++++++++ app/components/Onboarding/Onboarding.scss | 0 app/components/Onboarding/index.js | 3 + app/containers/Root.js | 53 ++++++++-------- app/main.dev.js | 2 +- app/reducers/index.js | 2 + app/reducers/onboarding.js | 29 +++++++++ app/variables.scss | 1 + 12 files changed, 273 insertions(+), 27 deletions(-) create mode 100644 app/components/Onboarding/Alias.js create mode 100644 app/components/Onboarding/Alias.scss create mode 100644 app/components/Onboarding/FormContainer.js create mode 100644 app/components/Onboarding/FormContainer.scss create mode 100644 app/components/Onboarding/Onboarding.js create mode 100644 app/components/Onboarding/Onboarding.scss create mode 100644 app/components/Onboarding/index.js create mode 100644 app/reducers/onboarding.js diff --git a/app/components/Onboarding/Alias.js b/app/components/Onboarding/Alias.js new file mode 100644 index 00000000..5894c0e8 --- /dev/null +++ b/app/components/Onboarding/Alias.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Isvg from 'react-inlinesvg' +import zapLogo from 'icons/zap_logo.svg' +import styles from './Alias.scss' + +const Alias = ({ alias, setAlias }) => { + console.log('alias: ', alias) + console.log('setAlias: ', setAlias) + + return ( +
+ input && input.focus()} + /> +
+ ) +} + +Alias.propTypes = {} + +export default Alias \ No newline at end of file diff --git a/app/components/Onboarding/Alias.scss b/app/components/Onboarding/Alias.scss new file mode 100644 index 00000000..59d32c8a --- /dev/null +++ b/app/components/Onboarding/Alias.scss @@ -0,0 +1,15 @@ +@import '../../variables.scss'; + +.alias { + background: transparent; + outline: none; + border: 0; + color: $gold; + -webkit-text-fill-color: $white; + font-size: 22px; +} + +.alias::-webkit-input-placeholder { + text-shadow: none; + -webkit-text-fill-color: initial; +} \ No newline at end of file diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js new file mode 100644 index 00000000..7b42a451 --- /dev/null +++ b/app/components/Onboarding/FormContainer.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Isvg from 'react-inlinesvg' +import zapLogo from 'icons/zap_logo.svg' +import styles from './FormContainer.scss' + +const FormContainer = ({ title, description, back, next, children }) => { + return ( +
+
+ +
+
+ +
+
+
+
+ +
+

{title}

+

{description}

+
+ +
+ {children} +
+ +
+
+
+ { + back &&
Back
+ } +
+
+ { + next &&
Next
+ } +
+
+
+
+ ) +} + +FormContainer.propTypes = { + children: PropTypes.object.isRequired +} + +export default FormContainer \ No newline at end of file diff --git a/app/components/Onboarding/FormContainer.scss b/app/components/Onboarding/FormContainer.scss new file mode 100644 index 00000000..cdbbb737 --- /dev/null +++ b/app/components/Onboarding/FormContainer.scss @@ -0,0 +1,67 @@ +@import '../../variables.scss'; + +.container { + position: relative; + height: 100vh; + background: $darkspaceblue; +} + +.titleBar { + background: $spacegrey; + height: 20px; + -webkit-user-select: none; + -webkit-app-region: drag; +} + +.header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 20px 40px; +} + +.info { + color: $white; + margin: 20px 0 20px 0; + padding: 20px 40px; + + h1 { + font-size: 22px; + margin-bottom: 10px; + } + + p { + font-size: 12px; + } +} + +.content { + position: relative; + background: $spaceblue; + height: 100vh; + padding: 60px 40px; +} + +.footer { + position: absolute; + bottom: 0; + padding: 20px 40px; + color: $white; + width: calc(100% - 80px); + + .buttonsContainer { + display: flex; + flex-direction: row; + justify-content: space-between; + + div { + cursor: pointer; + transition: all 0.25s; + + &:hover { + opacity: 0.5; + } + } + } +} + diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js new file mode 100644 index 00000000..9c568cf1 --- /dev/null +++ b/app/components/Onboarding/Onboarding.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Isvg from 'react-inlinesvg' +import zapLogo from 'icons/zap_logo.svg' + +import FormContainer from './FormContainer' +import Alias from './Alias' +import Syncing from './Syncing' +import styles from './Onboarding.scss' + + +class Onboarding extends Component { + render() { + const { + onboarding: { + step + }, + syncingProps + } = this.props + + const renderStep = () => { + console.log('step: ', step) + switch(step) { + case 1: + return ( + console.log('alias next')} + > + + + ) + default: + return + } + } + + return ( +
+ {renderStep()} +
+ ) + } +} + +Onboarding.propTypes = { + syncingProps: PropTypes.object.isRequired +} + +export default Onboarding diff --git a/app/components/Onboarding/Onboarding.scss b/app/components/Onboarding/Onboarding.scss new file mode 100644 index 00000000..e69de29b diff --git a/app/components/Onboarding/index.js b/app/components/Onboarding/index.js new file mode 100644 index 00000000..dbd7f88c --- /dev/null +++ b/app/components/Onboarding/index.js @@ -0,0 +1,3 @@ +import Onboarding from './Onboarding' + +export default Onboarding \ No newline at end of file diff --git a/app/containers/Root.js b/app/containers/Root.js index 44824e75..50f5e39e 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -5,42 +5,49 @@ import { ConnectedRouter } from 'react-router-redux' import PropTypes from 'prop-types' import LoadingBolt from '../components/LoadingBolt' +import Onboarding from '../components/Onboarding' import Syncing from '../components/Onboarding/Syncing' import { fetchBlockHeight, lndSelectors } from '../reducers/lnd' -import { newAddress } from '../reducers/address' import Routes from '../routes' const mapDispatchToProps = { - fetchBlockHeight, - newAddress + fetchBlockHeight } const mapStateToProps = state => ({ + onboarding: state.onboarding, lnd: state.lnd, - address: state.address, syncPercentage: lndSelectors.syncPercentage(state) }) +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const syncingProps = { + fetchBlockHeight: dispatchProps.fetchBlockHeight, + syncPercentage: stateProps.syncPercentage + } + + return { + ...stateProps, + ...dispatchProps, + ...ownProps, + + syncingProps + } +} + const Root = ({ store, history, - lnd, - newAddress, // eslint-disable-line no-shadow - fetchBlockHeight, // eslint-disable-line no-shadow - syncPercentage, - address + onboarding, + syncingProps }) => { // If we are syncing show the syncing screen - // if (lnd.syncing) { - if (true) { + if (!onboarding.onboarded) { return ( - ) } @@ -60,14 +67,8 @@ const Root = ({ Root.propTypes = { store: PropTypes.object.isRequired, history: PropTypes.object.isRequired, - lnd: PropTypes.object.isRequired, - fetchBlockHeight: PropTypes.func.isRequired, - newAddress: PropTypes.func.isRequired, - syncPercentage: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string - ]).isRequired, - address: PropTypes.object.isRequired + onboarding: PropTypes.object.isRequired, + syncingProps: PropTypes.object.isRequired } -export default connect(mapStateToProps, mapDispatchToProps)(Root) +export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Root) diff --git a/app/main.dev.js b/app/main.dev.js index 2a03bd76..8537df95 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -242,7 +242,7 @@ app.on('ready', async () => { menuBuilder.buildMenu() sendGrpcDisconnected() - // Check to see if and LND process is running + // Check to see if an LND process is running lookup({ command: 'lnd' }, (err, results) => { // There was an error checking for the LND process if (err) { throw new Error(err) } diff --git a/app/reducers/index.js b/app/reducers/index.js index 5abdb652..d674d66f 100644 --- a/app/reducers/index.js +++ b/app/reducers/index.js @@ -1,6 +1,7 @@ // @flow import { combineReducers } from 'redux' import { routerReducer as router } from 'react-router-redux' +import onboarding from './onboarding' import lnd from './lnd' import ticker from './ticker' import info from './info' @@ -26,6 +27,7 @@ import error from './error' const rootReducer = combineReducers({ router, + onboarding, lnd, ticker, info, diff --git a/app/reducers/onboarding.js b/app/reducers/onboarding.js new file mode 100644 index 00000000..07e00aa1 --- /dev/null +++ b/app/reducers/onboarding.js @@ -0,0 +1,29 @@ +// ------------------------------------ +// Constants +// ------------------------------------ + + +// ------------------------------------ +// Action Handlers +// ------------------------------------ +const ACTION_HANDLERS = { + +} + +// ------------------------------------ +// Reducer +// ------------------------------------ +const initialState = { + onboarded: false, + step: 1, + alias: '' +} + +// ------------------------------------ +// Reducer +// ------------------------------------ +export default function lndReducer(state = initialState, action) { + const handler = ACTION_HANDLERS[action.type] + + return handler ? handler(state, action) : state +} diff --git a/app/variables.scss b/app/variables.scss index 6656ab23..1da936ab 100644 --- a/app/variables.scss +++ b/app/variables.scss @@ -11,6 +11,7 @@ $darkestgrey: #999999; $bluegrey: #2A2D38; $spacegrey: #222E2B; $spaceblue: #252832; +$darkspaceblue: #1c1e26; $spaceborder: #404040; $gold: #DEA326; From 8d448708b798d261516f784ce937a8112cffa29e Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 12 Feb 2018 13:05:42 -0600 Subject: [PATCH 3/8] fix(onboarding): default state is false for onboarded --- app/components/Onboarding/Alias.js | 32 ++++++++-------- app/components/Onboarding/FormContainer.js | 4 +- app/components/Onboarding/Onboarding.js | 10 +++-- app/components/Onboarding/Syncing.js | 4 +- app/components/Wallet/Wallet.js | 3 +- app/containers/Root.js | 26 ++++++++++++- app/main.dev.js | 30 ++++++++++++--- app/reducers/ipc.js | 6 ++- app/reducers/onboarding.js | 44 +++++++++++++++++++++- 9 files changed, 125 insertions(+), 34 deletions(-) diff --git a/app/components/Onboarding/Alias.js b/app/components/Onboarding/Alias.js index 5894c0e8..41c5c757 100644 --- a/app/components/Onboarding/Alias.js +++ b/app/components/Onboarding/Alias.js @@ -4,22 +4,22 @@ import Isvg from 'react-inlinesvg' import zapLogo from 'icons/zap_logo.svg' import styles from './Alias.scss' -const Alias = ({ alias, setAlias }) => { - console.log('alias: ', alias) - console.log('setAlias: ', setAlias) - - return ( -
- input && input.focus()} - /> -
- ) -} +const Alias = ({ alias, updateAlias }) => ( +
+ input && input.focus()} + value={alias} + onChange={event => updateAlias(event.target.value)} + /> +
+) -Alias.propTypes = {} +Alias.propTypes = { + alias: PropTypes.string.isRequired, + updateAlias: PropTypes.func.isRequired +} export default Alias \ No newline at end of file diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js index 7b42a451..84ff7ff0 100644 --- a/app/components/Onboarding/FormContainer.js +++ b/app/components/Onboarding/FormContainer.js @@ -30,12 +30,12 @@ const FormContainer = ({ title, description, back, next, children }) => {
{ - back &&
Back
+ back &&
Back
}
{ - next &&
Next
+ next &&
Next
}
diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js index 9c568cf1..59d01bc4 100644 --- a/app/components/Onboarding/Onboarding.js +++ b/app/components/Onboarding/Onboarding.js @@ -13,13 +13,15 @@ class Onboarding extends Component { render() { const { onboarding: { - step + step, + alias }, + submit, + aliasProps, syncingProps } = this.props const renderStep = () => { - console.log('step: ', step) switch(step) { case 1: return ( @@ -27,9 +29,9 @@ class Onboarding extends Component { title={'1. What should we call you?'} description={'Set your nickname to help others connect with you on the Lightning Network'} back={null} - next={() => console.log('alias next')} + next={() => submit(alias)} > - + ) default: diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js index 9448b474..1a8dfa0e 100644 --- a/app/components/Onboarding/Syncing.js +++ b/app/components/Onboarding/Syncing.js @@ -24,9 +24,9 @@ class Syncing extends Component {

Syncing to the blockchain...

-
+
-

{syncPercentage.toString().length > 0 && `${syncPercentage}%`}

+

{isNaN(parseInt(syncPercentage)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}

diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index dcd0021c..50f5af84 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -32,7 +32,8 @@ class Wallet extends Component { } = this.props const { modalOpen, qrCodeType } = this.state - const usdAmount = parseFloat(btc.satoshisToUsd(balance.walletBalance, currentTicker.price_usd)) + const usdAmount = btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd) + console.log('usdAmount: ', usdAmount) const changeQrCode = () => { const qrCodeNum = this.state.qrCodeType === 1 ? 2 : 1 diff --git a/app/containers/Root.js b/app/containers/Root.js index 50f5e39e..9e96c1bc 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -7,10 +7,15 @@ import PropTypes from 'prop-types' import LoadingBolt from '../components/LoadingBolt' import Onboarding from '../components/Onboarding' import Syncing from '../components/Onboarding/Syncing' +import { updateAlias, changeStep, submit } from '../reducers/onboarding' import { fetchBlockHeight, lndSelectors } from '../reducers/lnd' import Routes from '../routes' const mapDispatchToProps = { + updateAlias, + changeStep, + submit, + fetchBlockHeight } @@ -27,11 +32,17 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { syncPercentage: stateProps.syncPercentage } + const aliasProps = { + updateAlias: dispatchProps.updateAlias, + alias: stateProps.onboarding.alias + } + return { ...stateProps, ...dispatchProps, ...ownProps, + aliasProps, syncingProps } } @@ -39,19 +50,32 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { const Root = ({ store, history, + + lnd, onboarding, - syncingProps + submit, + aliasProps, + syncingProps, + updateAlias, + changeStep, }) => { // If we are syncing show the syncing screen if (!onboarding.onboarded) { return ( ) } + // If we are syncing show the syncing screen + if (lnd.syncing) { + return + } + // Don't launch the app without gRPC connection if (!lnd.grpcStarted) { return } diff --git a/app/main.dev.js b/app/main.dev.js index 8537df95..9cb7b5bd 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -83,6 +83,19 @@ const sendLndSyncing = () => { }, 1000) } +const sendStartOnboarding = () => { + const sendStartOnboardingInterval = setInterval(() => { + if (didFinishLoad) { + clearInterval(sendStartOnboardingInterval) + + if (mainWindow) { + console.log('STARTING ONBOARDING') + mainWindow.webContents.send('startOnboarding') + } + } + }, 1000) +} + // Send the front end event letting them know the gRPC connection has started const sendGrpcConnected = () => { const sendGrpcConnectedInterval = setInterval(() => { @@ -126,7 +139,7 @@ const sendLndSynced = () => { } // Starts the LND node -const startLnd = () => { +const startLnd = (alias) => { let lndPath if (process.env.NODE_ENV === 'development') { @@ -146,7 +159,8 @@ const startLnd = () => { '--neutrino.connect=127.0.0.1:18333', '--autopilot.active', '--debuglevel=debug', - '--noencryptwallet' + '--noencryptwallet', + `--alias=${alias}` ] ) .on('error', error => console.log(`lnd error: ${error}`)) @@ -249,9 +263,10 @@ app.on('ready', async () => { // No LND process was found if (!results.length) { - // Assign path to certs to certPath - sendLndSyncing() + // let the application know onboarding has started + sendStartOnboarding() + // Assign path to certs to certPath switch (os.platform()) { case 'darwin': certPath = path.join(homedir, 'Library/Application Support/Lnd/tls.cert') @@ -267,7 +282,12 @@ app.on('ready', async () => { } // Start LND - startLnd() + // startLnd() + // once the onboarding has finished we wanna let the application we have started syncing and start LND + ipcMain.on('onboardingFinished', (event, { alias }) => { + sendLndSyncing() + startLnd(alias) + }) } else { // An LND process was found, no need to start our own console.log('LND ALREADY RUNNING') diff --git a/app/reducers/ipc.js b/app/reducers/ipc.js index 8ea03f28..c8569d78 100644 --- a/app/reducers/ipc.js +++ b/app/reducers/ipc.js @@ -35,6 +35,8 @@ import { import { receiveDescribeNetwork, receiveQueryRoutes, receiveInvoiceAndQueryRoutes } from './network' +import { startOnboarding } from './onboarding' + // Import all receiving IPC event handlers and pass them into createIpc const ipc = createIpc({ lndSyncing, @@ -91,7 +93,9 @@ const ipc = createIpc({ receiveDescribeNetwork, receiveQueryRoutes, - receiveInvoiceAndQueryRoutes + receiveInvoiceAndQueryRoutes, + + startOnboarding }) export default ipc diff --git a/app/reducers/onboarding.js b/app/reducers/onboarding.js index 07e00aa1..4fb5665f 100644 --- a/app/reducers/onboarding.js +++ b/app/reducers/onboarding.js @@ -1,20 +1,60 @@ +import { ipcRenderer } from 'electron' + // ------------------------------------ // Constants // ------------------------------------ +export const UPDATE_ALIAS = 'UPDATE_ALIAS' + +export const CHANGE_STEP = 'CHANGE_STEP' + +export const ONBOARDING_STARTED = 'ONBOARDING_STARTED' +export const ONBOARDING_FINISHED = 'ONBOARDING_FINISHED' + +// ------------------------------------ +// Actions +// ------------------------------------ +export function updateAlias(alias) { + return { + type: UPDATE_ALIAS, + alias + } +} +export function changeStep(step) { + return { + type: CHANGE_STEP, + step + } +} + +export function submit(alias) { + // alert the app we're done onboarding and it's cool to start LND + ipcRenderer.send('onboardingFinished', { alias }) + + return { + type: ONBOARDING_FINISHED + } +} + +export const startOnboarding = () => (dispatch) => { + dispatch({ type: ONBOARDING_STARTED }) +} // ------------------------------------ // Action Handlers // ------------------------------------ const ACTION_HANDLERS = { - + [UPDATE_ALIAS]: (state, { alias }) => ({ ...state, alias }), + [CHANGE_STEP]: (state, { step }) => ({ ...state, step }), + [ONBOARDING_STARTED]: state => ({ ...state, onboarded: false }), + [ONBOARDING_FINISHED]: state => ({ ...state, onboarded: true }) } // ------------------------------------ // Reducer // ------------------------------------ const initialState = { - onboarded: false, + onboarded: true, step: 1, alias: '' } From a0f28ecfbc6b5f4e8f1dba1dd0e29e58fac072e7 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 12 Feb 2018 13:23:10 -0600 Subject: [PATCH 4/8] fix(lint): fix some linty errors --- app/components/Onboarding/FormContainer.js | 6 ++++++ app/components/Onboarding/Onboarding.js | 12 +++++++----- app/containers/Root.js | 1 - 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js index 84ff7ff0..1e5f756b 100644 --- a/app/components/Onboarding/FormContainer.js +++ b/app/components/Onboarding/FormContainer.js @@ -45,6 +45,12 @@ const FormContainer = ({ title, description, back, next, children }) => { } FormContainer.propTypes = { + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + + back: PropTypes.func, + next: PropTypes.func, + children: PropTypes.object.isRequired } diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js index 59d01bc4..cf011ea7 100644 --- a/app/components/Onboarding/Onboarding.js +++ b/app/components/Onboarding/Onboarding.js @@ -3,9 +3,10 @@ import PropTypes from 'prop-types' import Isvg from 'react-inlinesvg' import zapLogo from 'icons/zap_logo.svg' +import LoadingBolt from 'components/LoadingBolt' + import FormContainer from './FormContainer' import Alias from './Alias' -import Syncing from './Syncing' import styles from './Onboarding.scss' @@ -17,8 +18,7 @@ class Onboarding extends Component { alias }, submit, - aliasProps, - syncingProps + aliasProps } = this.props const renderStep = () => { @@ -35,7 +35,7 @@ class Onboarding extends Component { ) default: - return + return } } @@ -48,7 +48,9 @@ class Onboarding extends Component { } Onboarding.propTypes = { - syncingProps: PropTypes.object.isRequired + onboarding: PropTypes.object.isRequired, + aliasProps: PropTypes.object.isRequired, + submit: PropTypes.func.isRequired } export default Onboarding diff --git a/app/containers/Root.js b/app/containers/Root.js index 9e96c1bc..3bc35d4b 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -66,7 +66,6 @@ const Root = ({ onboarding={onboarding} submit={submit} aliasProps={aliasProps} - syncingProps={syncingProps} /> ) } From 22f4eb09d098c0d4db7abeb55e7465bbb8ac435e Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 12 Feb 2018 14:22:15 -0600 Subject: [PATCH 5/8] fix(lint): linting errors --- app/components/Onboarding/Alias.js | 6 +- app/components/Onboarding/FormContainer.js | 70 +++++++++++----------- app/components/Onboarding/Onboarding.js | 65 +++++++++----------- app/components/Onboarding/Syncing.js | 4 +- app/components/Onboarding/index.js | 2 +- app/containers/Root.js | 14 +++-- 6 files changed, 77 insertions(+), 84 deletions(-) diff --git a/app/components/Onboarding/Alias.js b/app/components/Onboarding/Alias.js index 41c5c757..ff288136 100644 --- a/app/components/Onboarding/Alias.js +++ b/app/components/Onboarding/Alias.js @@ -1,7 +1,5 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' -import Isvg from 'react-inlinesvg' -import zapLogo from 'icons/zap_logo.svg' import styles from './Alias.scss' const Alias = ({ alias, updateAlias }) => ( @@ -22,4 +20,4 @@ Alias.propTypes = { updateAlias: PropTypes.func.isRequired } -export default Alias \ No newline at end of file +export default Alias diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js index 1e5f756b..8d01c285 100644 --- a/app/components/Onboarding/FormContainer.js +++ b/app/components/Onboarding/FormContainer.js @@ -1,57 +1,55 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' import Isvg from 'react-inlinesvg' import zapLogo from 'icons/zap_logo.svg' import styles from './FormContainer.scss' -const FormContainer = ({ title, description, back, next, children }) => { - return ( -
-
+const FormContainer = ({ title, description, back, next, children }) => ( +
+
-
+
+
+ +
+
+
+ +
+

{title}

+

{description}

+
+ +
+ {children} +
+ +
+
- + { + back &&
Back
+ }
+ { + next &&
Next
+ }
-
- -
-

{title}

-

{description}

+ +
+) -
- {children} -
- -
-
-
- { - back &&
Back
- } -
-
- { - next &&
Next
- } -
-
-
-
- ) -} FormContainer.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, - + back: PropTypes.func, next: PropTypes.func, - + children: PropTypes.object.isRequired } -export default FormContainer \ No newline at end of file +export default FormContainer diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js index cf011ea7..36950bf1 100644 --- a/app/components/Onboarding/Onboarding.js +++ b/app/components/Onboarding/Onboarding.js @@ -1,7 +1,5 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import Isvg from 'react-inlinesvg' -import zapLogo from 'icons/zap_logo.svg' import LoadingBolt from 'components/LoadingBolt' @@ -9,42 +7,37 @@ import FormContainer from './FormContainer' import Alias from './Alias' import styles from './Onboarding.scss' - -class Onboarding extends Component { - render() { - const { - onboarding: { - step, - alias - }, - submit, - aliasProps - } = this.props - - const renderStep = () => { - switch(step) { - case 1: - return ( - submit(alias)} - > - - - ) - default: - return - } +const Onboarding = ({ + onboarding: { + step, + alias + }, + submit, + aliasProps +}) => { + const renderStep = () => { + switch (step) { + case 1: + return ( + submit(alias)} + > + + + ) + default: + return } - - return ( -
- {renderStep()} -
- ) } + + return ( +
+ {renderStep()} +
+ ) } Onboarding.propTypes = { diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js index 1a8dfa0e..6426e6ae 100644 --- a/app/components/Onboarding/Syncing.js +++ b/app/components/Onboarding/Syncing.js @@ -16,7 +16,7 @@ class Syncing extends Component { return (
- +
@@ -26,7 +26,7 @@ class Syncing extends Component {
-

{isNaN(parseInt(syncPercentage)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}

+

{isNaN(parseInt(syncPercentage, 10)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}

diff --git a/app/components/Onboarding/index.js b/app/components/Onboarding/index.js index dbd7f88c..cb4cc808 100644 --- a/app/components/Onboarding/index.js +++ b/app/components/Onboarding/index.js @@ -1,3 +1,3 @@ import Onboarding from './Onboarding' -export default Onboarding \ No newline at end of file +export default Onboarding diff --git a/app/containers/Root.js b/app/containers/Root.js index 3bc35d4b..636f0397 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -50,14 +50,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { const Root = ({ store, history, - + lnd, onboarding, submit, aliasProps, - syncingProps, - updateAlias, - changeStep, + syncingProps }) => { // If we are syncing show the syncing screen if (!onboarding.onboarded) { @@ -90,8 +88,14 @@ const Root = ({ Root.propTypes = { store: PropTypes.object.isRequired, history: PropTypes.object.isRequired, + lnd: PropTypes.object.isRequired, onboarding: PropTypes.object.isRequired, - syncingProps: PropTypes.object.isRequired + syncingProps: PropTypes.object.isRequired, + aliasProps: PropTypes.object.isRequired, + + submit: PropTypes.func.isRequired, + updateAlias: PropTypes.func.isRequired, + changeStep: PropTypes.func.isRequired } export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Root) From 410b7ba07d218bdba85a72645dba6623e7d82b35 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 12 Feb 2018 17:04:21 -0600 Subject: [PATCH 6/8] fix(lint): fix lint errors --- app/components/Onboarding/Onboarding.js | 2 +- app/containers/Root.js | 33 ++++++++++--------------- 2 files changed, 14 insertions(+), 21 deletions(-) diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js index 36950bf1..34ae5d46 100644 --- a/app/components/Onboarding/Onboarding.js +++ b/app/components/Onboarding/Onboarding.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' import LoadingBolt from 'components/LoadingBolt' diff --git a/app/containers/Root.js b/app/containers/Root.js index 636f0397..f2a922ec 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -20,8 +20,8 @@ const mapDispatchToProps = { } const mapStateToProps = state => ({ - onboarding: state.onboarding, lnd: state.lnd, + onboarding: state.onboarding, syncPercentage: lndSelectors.syncPercentage(state) }) @@ -37,12 +37,18 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { alias: stateProps.onboarding.alias } + const onboardingProps = { + onboarding: stateProps.onboarding, + submit: dispatchProps.submit, + aliasProps + } + return { ...stateProps, ...dispatchProps, ...ownProps, - aliasProps, + onboardingProps, syncingProps } } @@ -52,20 +58,12 @@ const Root = ({ history, lnd, - onboarding, - submit, - aliasProps, + onboardingProps, syncingProps }) => { // If we are syncing show the syncing screen - if (!onboarding.onboarded) { - return ( - - ) + if (!onboardingProps.onboarding.onboarded) { + return } // If we are syncing show the syncing screen @@ -89,13 +87,8 @@ Root.propTypes = { store: PropTypes.object.isRequired, history: PropTypes.object.isRequired, lnd: PropTypes.object.isRequired, - onboarding: PropTypes.object.isRequired, - syncingProps: PropTypes.object.isRequired, - aliasProps: PropTypes.object.isRequired, - - submit: PropTypes.func.isRequired, - updateAlias: PropTypes.func.isRequired, - changeStep: PropTypes.func.isRequired + onboardingProps: PropTypes.object.isRequired, + syncingProps: PropTypes.object.isRequired } export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Root) From 4c44ed3c65315b852b7aae198f1aa162fd8bb14a Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 12 Feb 2018 17:28:29 -0600 Subject: [PATCH 7/8] fix(lint) --- app/reducers/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/reducers/index.js b/app/reducers/index.js index d674d66f..ea131b2e 100644 --- a/app/reducers/index.js +++ b/app/reducers/index.js @@ -1,4 +1,3 @@ -// @flow import { combineReducers } from 'redux' import { routerReducer as router } from 'react-router-redux' import onboarding from './onboarding' From 33e260e0330044ee2ee34db85aebd28ad5204b1a Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 12 Feb 2018 17:42:03 -0600 Subject: [PATCH 8/8] fix(lint) --- app/main.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/main.dev.js b/app/main.dev.js index 9cb7b5bd..bc84b8d2 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -8,7 +8,7 @@ * When running `npm run build` or `npm run build-main`, this file is compiled to * `./app/main.prod.js` using webpack. This gives us some performance wins. * - * @flow + * */ import { app, BrowserWindow, ipcMain } from 'electron' import path from 'path'