diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js index aefeb8e2..24b2c492 100644 --- a/app/components/LndSyncing/LndSyncing.js +++ b/app/components/LndSyncing/LndSyncing.js @@ -1,7 +1,9 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import { FaCopy } from 'react-icons/lib/fa' import styles from './LndSyncing.scss' + class LndSyncing extends Component { constructor(props) { super(props) @@ -29,28 +31,35 @@ class LndSyncing extends Component { } componentWillMount() { - this.props.fetchBlockHeight() + const { fetchBlockHeight, newAddress } = this.props + + fetchBlockHeight() + newAddress('np2wkh') } render() { - const { fetchingBlockHeight, syncPercentage } = this.props + const { newAddress, fetchingBlockHeight, syncPercentage, address: { address } } = this.props const { facts, currentFact } = this.state const renderCurrentFact = facts[currentFact] return (
-

zap

-
- {!fetchingBlockHeight &&

{syncPercentage > 0 && `${syncPercentage}%`}

} -
-

syncing your lightning node to the blockchain

-
+
+
+

zap

+
+
+

{syncPercentage}%

+
+
+
+

{renderCurrentFact.title}

{renderCurrentFact.description}

-
    +
      { facts.map((fact, index) => (
+ +
+
+

Fund your Zap wallet

+

Deposit to your wallet while your node is syncing so autopilot can start working magic for you

+
+
+
+ {address} + + + +
+
+
) } @@ -73,4 +97,4 @@ LndSyncing.propTypes = { syncPercentage: PropTypes.number.isRequired } -export default LndSyncing +export default LndSyncing \ No newline at end of file diff --git a/app/components/LndSyncing/LndSyncing.scss b/app/components/LndSyncing/LndSyncing.scss index b761caa6..961c1b0e 100644 --- a/app/components/LndSyncing/LndSyncing.scss +++ b/app/components/LndSyncing/LndSyncing.scss @@ -2,9 +2,16 @@ .container { height: 100vh; - padding: 100px; background: $secondary; + header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: top; + padding: 100px; + } + h3 { font-size: 50px; color: $white; @@ -12,33 +19,40 @@ .loading { text-align: center; - margin-top: 100px; position: relative; + .spinner, h1 { + display: inline-block; + vertical-align: top; + } + h4 { position: absolute; min-width: 100px; - top: calc(50% - 30px); + top: calc(50% - 5px); left: calc(50% - 48px); color: $main; + font-size: 10px; } h1 { - margin-top: 25px; color: $main; + line-height: 50px; + margin-left: 20px; } } - + .facts { - position: absolute; - bottom: 10%; 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; @@ -51,11 +65,15 @@ } } + .factButtons { + text-align: center; + } + .factButton { cursor: pointer; display: inline-block; - width: 20px; - height: 20px; + width: 15px; + height: 15px; background: $white; opacity: 0.5; border-radius: 50%; @@ -71,6 +89,116 @@ } } +.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: 18px; + } + + 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); @@ -81,8 +209,8 @@ .spinner { margin: 0 auto; - height: 100px; - width: 100px; + 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; @@ -111,4 +239,4 @@ 100% { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/app/containers/Root.js b/app/containers/Root.js index c7313c5c..9140ad03 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -7,14 +7,17 @@ import PropTypes from 'prop-types' import LoadingBolt from '../components/LoadingBolt' import LndSyncing from '../components/LndSyncing' import { fetchBlockHeight, lndSelectors } from '../reducers/lnd' +import { newAddress } from '../reducers/address' import Routes from '../routes' const mapDispatchToProps = { - fetchBlockHeight + fetchBlockHeight, + newAddress } const mapStateToProps = state => ({ lnd: state.lnd, + address: state.address, syncPercentage: lndSelectors.syncPercentage(state) }) @@ -23,17 +26,20 @@ const Root = ({ store, history, lnd, + newAddress, fetchBlockHeight, // eslint-disable-line no-shadow - syncPercentage + syncPercentage, + address }) => { // If we are syncing show the syncing screen - // if (lnd.syncing) { - if (true) { + if (lnd.syncing) { return ( ) }