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