From ec513cae0420773ee883b751882f9cf5f435f387 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 22 Jun 2018 16:05:35 -0500
Subject: [PATCH] feat(syncing): new sync design and add deposit address

---
 app/components/Onboarding/Syncing.js   | 43 ++++++++++++++++--
 app/components/Onboarding/Syncing.scss | 62 +++++++++++++++++++++++---
 app/containers/Root.js                 |  8 +++-
 3 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js
index 99750486..2df806d6 100644
--- a/app/components/Onboarding/Syncing.js
+++ b/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,32 @@ 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>
+
+          <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>
+
           <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 +77,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
 }
 
diff --git a/app/components/Onboarding/Syncing.scss b/app/components/Onboarding/Syncing.scss
index 6ca829a9..28466895 100644
--- a/app/components/Onboarding/Syncing.scss
+++ b/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,4 @@
     color: $gold;
     margin-top: 10px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/containers/Root.js b/app/containers/Root.js
index 762ac0da..aecce408 100644
--- a/app/containers/Root.js
+++ b/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 = {