fix(onboarding): default state is false for onboarded

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 (
-    <div className={styles.container}>
-      <input
-        type='text'
-        placeholder='Satoshi'
-        className={styles.alias}
-        ref={input => input && input.focus()}
-      />
-    </div>
-  )
-}
+const Alias = ({ alias, updateAlias }) => (
+  <div className={styles.container}>
+    <input
+      type='text'
+      placeholder='Satoshi'
+      className={styles.alias}
+      ref={input => input && input.focus()}
+      value={alias}
+      onChange={event => updateAlias(event.target.value)}
+    />
+  </div>
+)
 
-Alias.propTypes = {}
+Alias.propTypes = {
+  alias: PropTypes.string.isRequired,
+  updateAlias: PropTypes.func.isRequired
+}
 
 export default Alias

app/components/Onboarding/FormContainer.js

@@ -30,12 +30,12 @@ const FormContainer = ({ title, description, back, next, children }) => {
         <div className={styles.buttonsContainer}>
           <section>
             {
-              back && <div>Back</div>
+              back && <div onClick={back}>Back</div>
             }
           </section>
           <section>
             {
-              next && <div>Next</div>
+              next && <div onClick={next}>Next</div>
             }
           </section>
         </div>

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)}
             >
-              <Alias />
+              <Alias {...aliasProps} />
             </FormContainer>
           )
         default:

app/components/Onboarding/Syncing.js

@@ -24,9 +24,9 @@ class Syncing extends Component {
           <section className={styles.progressContainer}>
             <h1>Syncing to the blockchain...</h1>
             <div className={styles.progressBar}>
-              <div className={styles.progress} style={{ width: syncPercentage }} />
+              <div className={styles.progress} style={{ width: isNaN(syncPercentage) ? 0 : `${syncPercentage}%` }} />
             </div>
-            <h4>{syncPercentage.toString().length > 0 && `${syncPercentage}%`}</h4>
+            <h4>{isNaN(parseInt(syncPercentage)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}</h4>
           </section>
         </div>
       </div>

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

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 (
       <Onboarding
         onboarding={onboarding}
+        submit={submit}
+        aliasProps={aliasProps}
         syncingProps={syncingProps}
       />
     )
   }
 
+  // If we are syncing show the syncing screen
+  if (lnd.syncing) {
+    return <Syncing {...syncingProps} />
+  }
+
   // Don't launch the app without gRPC connection
   if (!lnd.grpcStarted) { return <LoadingBolt /> }
 

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')

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

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: ''
 }