From dad4546e58d8d5f95c0fadea96a1fe22dff7000d Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Sat, 10 Feb 2018 18:11:01 -0600 Subject: [PATCH] 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;