diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js
index aefeb8e2..fd2c6ac7 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 { 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
-
+
+
{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
+
+
+
)
}
}
LndSyncing.propTypes = {
+ newAddress: PropTypes.func.isRequired,
fetchBlockHeight: PropTypes.func.isRequired,
- fetchingBlockHeight: PropTypes.bool.isRequired,
- syncPercentage: PropTypes.number.isRequired
+ syncPercentage: PropTypes.number.isRequired,
+ address: PropTypes.object.isRequired
}
export default LndSyncing
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 23bb5de7..22958e49 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,16 +26,19 @@ const Root = ({
store,
history,
lnd,
+ newAddress, // eslint-disable-line no-shadow
fetchBlockHeight, // eslint-disable-line no-shadow
- syncPercentage
+ syncPercentage,
+ address
}) => {
// If we are syncing show the syncing screen
if (lnd.syncing) {
return (
)
}
@@ -54,7 +60,9 @@ Root.propTypes = {
history: PropTypes.object.isRequired,
lnd: PropTypes.object.isRequired,
fetchBlockHeight: PropTypes.func.isRequired,
- syncPercentage: PropTypes.number.isRequired
+ newAddress: PropTypes.func.isRequired,
+ syncPercentage: PropTypes.number.isRequired,
+ address: PropTypes.object.isRequired
}
export default connect(mapStateToProps, mapDispatchToProps)(Root)