Merge pull request #475 from LN-Zap/feature/syncing

Feature/syncing

app/components/Onboarding/Syncing.js

@@ -1,16 +1,27 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import QRCode from 'qrcode.react'
+import copy from 'copy-to-clipboard'
 import Isvg from 'react-inlinesvg'
 import zapLogo from 'icons/zap_logo.svg'
+import { showNotification } from 'notifications'
 import styles from './Syncing.scss'
 
 class Syncing extends Component {
   componentWillMount() {
-    this.props.fetchBlockHeight()
+    const { fetchBlockHeight, newAddress } = this.props
+
+    fetchBlockHeight()
+    newAddress('np2wkh')
   }
 
   render() {
-    const { syncPercentage } = this.props
+    const { syncPercentage, address } = this.props
+
+    const copyClicked = () => {
+      copy(address)
+      showNotification('Noice', 'Successfully copied to clipboard')
+    }
 
     return (
       <div className={styles.container}>
@@ -20,8 +31,38 @@ class Syncing extends Component {
           <header>
             <Isvg className={styles.bitcoinLogo} src={zapLogo} />
           </header>
+
+          <div className={styles.title}>
+            <h1>Fund your Zap wallet</h1>
+            <p>Might as well fund your wallet while you&apos;re waiting to sync.</p>
+          </div>
+
+          {address.length ? (
+            <div className={styles.address}>
+              <div className={styles.qrConatiner}>
+                <QRCode
+                  value={address}
+                  renderAs="svg"
+                  size={100}
+                  bgColor="transparent"
+                  fgColor="white"
+                  level="L"
+                  className={styles.qrcode}
+                />
+              </div>
+              <section className={styles.textAddress}>
+                <span>{address}</span>
+                <span onClick={copyClicked}>copy</span>
+              </section>
+            </div>
+          ) : (
+            <div className={styles.loading}>
+              <div className={styles.spinner} />
+            </div>
+          )}
+
           <section className={styles.progressContainer}>
-            <h1>Syncing to the blockchain...</h1>
+            <h3>Syncing to the blockchain...</h3>
             <div className={styles.progressBar}>
               <div
                 className={styles.progress}
@@ -42,6 +83,8 @@ class Syncing extends Component {
 
 Syncing.propTypes = {
   fetchBlockHeight: PropTypes.func.isRequired,
+  newAddress: PropTypes.func.isRequired,
+  address: PropTypes.string.isRequired,
   syncPercentage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
 }
 

app/components/Onboarding/Syncing.scss

@@ -3,26 +3,74 @@
 .container {
   position: relative;
   height: 100vh;
-  background: $spaceblue;
+  background: #2a2d38;
+  font-family: 'Roboto', sans-serif;
 }
 
 .titleBar {
-  background: $spacegrey;
   height: 20px;
   -webkit-user-select: none;
   -webkit-app-region: drag;
+  background: #1c1e26;
 }
 
 .content {
-  padding: 20px 40px;
+  color: $white;
+  text-align: center;
+  background: #1c1e26;
+
+  header {
+    text-align: left;
+    padding: 20px 40px;
+  }
+
+  .title {
+    margin: 30px;
+    background: #1c1e26;
+
+    h1 {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+
+    p {
+      font-size: 12px;
+    }
+  }
+
+  .address {
+    background: #1c1e26;
+
+    .textAddress {
+      margin-top: 20px;
+
+      span {
+        font-size: 12px;
+        margin: 0 5px;
+
+        &:nth-child(2) {
+          font-size: 14px;
+          opacity: 0.5;
+          cursor: pointer;
+          transition: all 0.25s;
+
+          &:hover {
+            opacity: 0.25;
+          }
+        }
+      }
+    }
+  }
 }
 
 .progressContainer {
   color: $white;
   text-align: center;
-  margin-top: 20%;
+  margin-top: 10%;
+  padding: 40px;
+  background: #2a2d38;
 
-  h1 {
+  h3 {
     margin-bottom: 20px;
   }
 
@@ -37,7 +85,7 @@
 
   .progress {
     background: $gold;
-    background: #DEA326;
+    background: #dea326;
     height: 10px;
     border-radius: 5px;
     transition: all 0.25s;
@@ -47,4 +95,43 @@
     color: $gold;
     margin-top: 10px;
   }
-}
+}
+
+.spinner {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+  margin: 0 auto;
+  height: 75px;
+  width: 75px;
+  -webkit-animation: animation-rotate 1000ms linear infinite;
+  -moz-animation: animation-rotate 1000ms linear infinite;
+  -o-animation: animation-rotate 1000ms linear infinite;
+  animation: animation-rotate 1000ms linear infinite;
+}
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/containers/Root.js

@@ -30,6 +30,7 @@ import {
   updateSeedInput
 } from '../reducers/onboarding'
 import { fetchBlockHeight, lndSelectors } from '../reducers/lnd'
+import { newAddress } from '../reducers/address'
 import Routes from '../routes'
 
 const mapDispatchToProps = {
@@ -52,6 +53,7 @@ const mapDispatchToProps = {
   setSignupCreate,
   setSignupImport,
   updateSeedInput,
+  newAddress,
 
   fetchBlockHeight
 }
@@ -59,6 +61,7 @@ const mapDispatchToProps = {
 const mapStateToProps = state => ({
   lnd: state.lnd,
   onboarding: state.onboarding,
+  address: state.address,
 
   syncPercentage: lndSelectors.syncPercentage(state),
   passwordIsValid: onboardingSelectors.passwordIsValid(state),
@@ -74,7 +77,10 @@ const mapStateToProps = state => ({
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const syncingProps = {
     fetchBlockHeight: dispatchProps.fetchBlockHeight,
-    syncPercentage: stateProps.syncPercentage
+    newAddress: dispatchProps.newAddress,
+
+    syncPercentage: stateProps.syncPercentage,
+    address: stateProps.address.address
   }
 
   const connectionTypeProps = {