feature(alias): setup form container and onboarding architecture. hard code alias form

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 (
+    <div className={styles.container}>
+      <input
+        type='text'
+        placeholder='Satoshi'
+        className={styles.alias}
+        ref={input => input && input.focus()}
+      />
+    </div>
+  )
+}
+
+Alias.propTypes = {}
+
+export default Alias

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;
+}

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 (
+    <div className={styles.container}>
+      <div className={styles.titleBar} />
+
+      <header className={styles.header}>
+        <section>
+          <Isvg src={zapLogo} />
+        </section>
+        <section>
+        </section>
+      </header>
+
+      <div className={styles.info}>
+        <h1>{title}</h1>
+        <p>{description}</p>
+      </div>
+
+      <div className={styles.content}>
+        {children}
+      </div>
+
+      <footer className={styles.footer}>
+        <div className={styles.buttonsContainer}>
+          <section>
+            {
+              back && <div>Back</div>
+            }
+          </section>
+          <section>
+            {
+              next && <div>Next</div>
+            }
+          </section>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+FormContainer.propTypes = {
+  children: PropTypes.object.isRequired
+}
+
+export default FormContainer

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;
+      }
+    }
+  }
+}
+

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 (
+            <FormContainer
+              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')}
+            >
+              <Alias />
+            </FormContainer>
+          )
+        default:
+          return <Syncing {...syncingProps} />
+      }
+    }
+
+    return (
+      <div className={styles.container}>
+        {renderStep()}
+      </div>
+    )
+  }
+}
+
+Onboarding.propTypes = {
+  syncingProps: PropTypes.object.isRequired
+}
+
+export default Onboarding

app/components/Onboarding/index.js

@@ -0,0 +1,3 @@
+import Onboarding from './Onboarding'
+
+export default Onboarding

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 (
-      <Syncing
-        newAddress={newAddress}
-        fetchBlockHeight={fetchBlockHeight}
-        syncPercentage={syncPercentage}
-        address={address}
-        grpcStarted={lnd.grpcStarted}
+      <Onboarding
+        onboarding={onboarding}
+        syncingProps={syncingProps}
       />
     )
   }
@@ -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)

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

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,

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
+}

app/variables.scss

@@ -11,6 +11,7 @@ $darkestgrey: #999999;
 $bluegrey: #2A2D38;
 $spacegrey: #222E2B;
 $spaceblue: #252832;
+$darkspaceblue: #1c1e26;
 $spaceborder: #404040;
 
 $gold: #DEA326;