feature(sync): updated sync design

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 (
       <div className={styles.container}>
-        <h3>zap</h3>
-        <div className={styles.loading}>
-          {!fetchingBlockHeight && <h4>{syncPercentage > 0 && `${syncPercentage}%`}</h4>}
-          <div className={styles.spinner} />
-          <h1>syncing your lightning node to the blockchain</h1>
-        </div>
+        <header>
+          <section>
+            <h3>zap</h3>
+          </section>
+          <section className={styles.loading}>
+            <h4>{syncPercentage}%</h4>
+            <div className={styles.spinner} />
+          </section>
+        </header>
+
         <div className={styles.facts}>
           <div className={styles.fact}>
             <h2>{renderCurrentFact.title}</h2>
             <p>{renderCurrentFact.description}</p>
           </div>
-          <ul>
+          <ul className={styles.factButtons}>
             {
               facts.map((fact, index) => (
                 <li
@@ -62,6 +71,21 @@ class LndSyncing extends Component {
             }
           </ul>
         </div>
+
+        <div className={styles.footer}>
+          <section>
+            <h2>Fund your Zap wallet</h2>
+            <p>Deposit to your wallet while your node is syncing so autopilot can start working magic for you</p>
+          </section>
+          <section>
+            <div className={styles.address}>
+              <span>{address}</span>
+              <span className='hint--left' data-hint='Copy Address'>
+                <FaCopy />
+              </span>
+            </div>
+          </section>
+        </div>
       </div>
     )
   }
@@ -73,4 +97,4 @@ LndSyncing.propTypes = {
   syncPercentage: PropTypes.number.isRequired
 }
 
-export default LndSyncing
+export default LndSyncing

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

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 (
       <LndSyncing
+        newAddress={newAddress}
         fetchBlockHeight={fetchBlockHeight}
         fetchingBlockHeight={lnd.fetchingBlockHeight}
         syncPercentage={syncPercentage}
+        address={address}
       />
     )
   }