feature(help): help videos

app/components/LndSyncing/LndSyncing.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import copy from 'copy-to-clipboard'
+import { showNotification } from 'notifications'
 import { FaCopy } from 'react-icons/lib/fa'
 import styles from './LndSyncing.scss'
 
@@ -31,25 +33,37 @@ class LndSyncing extends Component {
   }
 
   componentWillMount() {
-    const { fetchBlockHeight, newAddress } = this.props
+    this.props.fetchBlockHeight()
+  }
+
+  componentDidUpdate(prevProps) {
+    const { grpcStarted, newAddress } = this.props
     
-    fetchBlockHeight()
+    if (!prevProps.grpcStarted && grpcStarted) {
       newAddress('np2wkh')
     }
+  }
 
   render() {
-    const { syncPercentage, address: { address } } = this.props
+    const { syncPercentage, address: { addressLoading, address } } = this.props
     const { facts, currentFact } = this.state
     const renderCurrentFact = facts[currentFact]
 
+    const copyOnClick = () => {
+      if (!address) { return }
+      
+      copy(address)
+      showNotification('Noice', 'Successfully copied to clipboard')
+    }
+
     return (
       <div className={styles.container}>
         <header>
           <section>
             <h3>zap</h3>
           </section>
-          <section className={styles.loading}>
-            <h4>{syncPercentage}%</h4>
+          <section className={`${styles.loading} hint--left`} data-hint='Syncing your Lightning Network node to the blockchain'>
+            <h4>{syncPercentage.toString().length > 0 && `${syncPercentage}%`}</h4>
             <div className={styles.spinner} />
           </section>
         </header>
@@ -79,8 +93,15 @@ class LndSyncing extends Component {
           </section>
           <section>
             <div className={styles.address}>
-              <span>{address}</span>
-              <span className='hint--left' data-hint='Copy Address'>
+              <span>
+                {
+                  addressLoading ?
+                    'Loading...'
+                    :
+                    address
+                }
+              </span>
+              <span className='hint--left' data-hint='Copy Address' onClick={copyOnClick}>
                 <FaCopy />
               </span>
             </div>
@@ -94,8 +115,12 @@ class LndSyncing extends Component {
 LndSyncing.propTypes = {
   newAddress: PropTypes.func.isRequired,
   fetchBlockHeight: PropTypes.func.isRequired,
-  syncPercentage: PropTypes.number.isRequired,
-  address: PropTypes.object.isRequired
+  syncPercentage: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ]).isRequired,
+  address: PropTypes.object.isRequired,
+  grpcStarted: PropTypes.bool.isRequired
 }
 
 export default LndSyncing

app/components/LndSyncing/LndSyncing.scss

@@ -183,7 +183,7 @@
     span:nth-child(1) {
       flex: 9;
       overflow-x: scroll;
-      font-size: 18px;
+      font-size: 14px;
     }
 
     span:nth-child(2) {

app/containers/Root.js

@@ -39,6 +39,7 @@ const Root = ({
         fetchBlockHeight={fetchBlockHeight}
         syncPercentage={syncPercentage}
         address={address}
+        grpcStarted={lnd.grpcStarted}
       />
     )
   }
@@ -61,7 +62,10 @@ Root.propTypes = {
   lnd: PropTypes.object.isRequired,
   fetchBlockHeight: PropTypes.func.isRequired,
   newAddress: PropTypes.func.isRequired,
-  syncPercentage: PropTypes.number.isRequired,
+  syncPercentage: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ]).isRequired,
   address: PropTypes.object.isRequired
 }
 

app/main.dev.js

@@ -133,7 +133,7 @@ const startLnd = () => {
     [
       '--bitcoin.active',
       '--bitcoin.testnet',
-      '--neutrino.active',
+      '--bitcoin.node=neutrino',
       '--neutrino.connect=btcd0.lightning.computer:18333',
       '--autopilot.active',
       '--debuglevel=debug',

app/reducers/lnd.js

@@ -122,7 +122,13 @@ const lndBlockHeightSelector = state => state.lnd.lndBlockHeight
 lndSelectors.syncPercentage = createSelector(
   blockHeightSelector,
   lndBlockHeightSelector,
-  (blockHeight, lndBlockHeight) => (Math.floor((lndBlockHeight / blockHeight) * 100))
+  (blockHeight, lndBlockHeight) => {
+    const percentage = Math.floor((lndBlockHeight / blockHeight) * 100)
+
+    if (percentage === Infinity) { return '' }
+
+    return percentage
+  }
 )
 
 export { lndSelectors }

app/routes/help/components/Help.js

@@ -13,39 +13,38 @@ class Help extends Component {
     this.state = {
       videos: [
         {
-          id: 'GYIHrd7e-n0',
-          title: 'Joyner Lucas - Mask Off Remix (Mask On)'
+          id: '8kZq6eec49A',
+          title: 'Syncing and Depositing - Zap Lightning Network Wallet Tutorial (Video 1)'
         },
         {
-          id: 'ZFy7RdZWwj8',
-          title: 'Joyner Lucas - Bank Account (Remix)'
+          id: 'xSiTH63fOQM',
+          title: 'Adding a contact - Zap Lightning Network Wallet Tutorial (Video 2)'
         },
         {
-          id: 'DlFmfxACvig',
-          title: 'Lil Skies - Nowadays ft. Landon Cube (Dir. by @_ColeBennett_)'
+          id: 'c0SLmywYDHU',
+          title: 'Making a Lightning Network payment - Zap Lightning Network Wallet Tutorial (Video 3)'
         },
         {
-          id: 'XbZ0OXmXw38',
-          title: 'Dave - Wanna Know ft. Drake (Audio)'
+          id: 'Xrx2TiiF90Q',
+          title: 'Receive Lightning Network payment - Zap Lightning Network Wallet Tutorial (Video 4)'
         },
         {
-          id: 'sRrcogH7F_I',
-          title: 'Bryson Tiller - How About Now (Freestyle)'
+          id: 'YfxukBHnwUM',
+          title: 'Network Map - Zap Lightning Network Wallet Tutorial (Video 5)'
         },
         {
-          id: 'j6Np8vCO0hQ',
-          title: 'Young Pappy - Killa (Official Music Video)'
-        },
-        {
-          id: 'PjqKPHZJgF0',
-          title: 'Lil Wayne - Family Feud feat. Drake (Official Audio) | Dedication 6'
+          id: 'NORklrrYzOg',
+          title: 'Using an explorer to add Zap contacts - Zap Lightning Network Wallet Tutorial (Video 6)'
         }
-      ]
+      ],
+      searchQuery: ''
     }
   }
 
   render() {
-    const { videos } = this.state
+    const { videos, searchQuery } = this.state
+    const filteredVideos = videos.filter(video => video.title.includes(searchQuery))
+
     return (
       <div className={styles.helpContainer}>
         <header className={styles.header}>
@@ -57,8 +56,8 @@ class Help extends Component {
             <MdSearch />
           </label>
           <input
-            value={''}
-            onChange={event => console.log('gang')}
+            value={searchQuery}
+            onChange={event => this.setState({ searchQuery: event.target.value })}
             className={`${styles.text} ${styles.input}`}
             placeholder='Search the video library...'
             type='text'
@@ -68,8 +67,7 @@ class Help extends Component {
 
         <ul className={styles.videos}>
           {
-            videos.map((video, index) => {
-              return (
+            filteredVideos.map((video, index) =>
               <li key={index}>
                 <iframe
                   src={`https://www.youtube.com/embed/${video.id}`}
@@ -80,7 +78,6 @@ class Help extends Component {
                 </section>
               </li>
             )
-            })
           }
         </ul>
       </div>

app/routes/help/components/Help.scss

@@ -83,6 +83,8 @@
       background: $darkgrey;
       cursor: pointer;
       transition: all 0.25s;
+      text-align: left;
+      line-height: 1.5;
     }
   }
 }

package.json

@@ -38,7 +38,7 @@
     "npm": ">=5.0.0"
   },
   "build": {
-    "productName": "ZapDesktop",
+    "productName": "Zap",
     "appId": "org.develar.ZapDesktop",
     "files": [
       "dist/",