From c4979cc27734bfd34934b472f8839c3474793585 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 15 Jan 2018 14:30:45 -0600
Subject: [PATCH 1/5] feature(help): add help nav and icon

---
 app/components/Nav/Nav.js | 7 +++++++
 app/icons/help.svg        | 1 +
 2 files changed, 8 insertions(+)
 create mode 100644 app/icons/help.svg

diff --git a/app/components/Nav/Nav.js b/app/components/Nav/Nav.js
index 64d26c72..467b2caa 100644
--- a/app/components/Nav/Nav.js
+++ b/app/components/Nav/Nav.js
@@ -6,6 +6,7 @@ import Isvg from 'react-inlinesvg'
 import walletIcon from 'icons/wallet.svg'
 import peersIcon from 'icons/peers.svg'
 import networkIcon from 'icons/globe.svg'
+import helpIcon from 'icons/help.svg'
 
 import styles from './Nav.scss'
 
@@ -34,6 +35,12 @@ const Nav = ({ openPayForm, openRequestForm }) => (
           <span>Network</span>
         </li>
       </NavLink>
+      <NavLink exact to='/help' activeClassName={styles.active} className={styles.link}>
+        <li>
+          <Isvg styles={{ verticalAlign: 'middle' }} src={helpIcon} />
+          <span>Help</span>
+        </li>
+      </NavLink>
     </ul>
     <div className={styles.buttons}>
       <div className={`buttonPrimary ${styles.button}`} onClick={openPayForm}>
diff --git a/app/icons/help.svg b/app/icons/help.svg
new file mode 100644
index 00000000..54c2bd7d
--- /dev/null
+++ b/app/icons/help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-life-buoy"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg>
\ No newline at end of file

From 5e9c77432a066a0e680732e3b6cb24eb32e69482 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 15 Jan 2018 23:38:10 -0600
Subject: [PATCH 2/5] feature(help): hard code help route

---
 app/routes.js                               |  2 +
 app/routes/help/components/Help.js          | 95 +++++++++++++++++++++
 app/routes/help/components/Help.scss        | 88 +++++++++++++++++++
 app/routes/help/containers/HelpContainer.js | 10 +++
 app/routes/help/index.js                    |  3 +
 5 files changed, 198 insertions(+)
 create mode 100644 app/routes/help/components/Help.js
 create mode 100644 app/routes/help/components/Help.scss
 create mode 100644 app/routes/help/containers/HelpContainer.js
 create mode 100644 app/routes/help/index.js

diff --git a/app/routes.js b/app/routes.js
index b6442086..bf141588 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -5,12 +5,14 @@ import App from './routes/app'
 import Activity from './routes/activity'
 import Contacts from './routes/contacts'
 import Network from './routes/network'
+import Help from './routes/help'
 
 const routes = () => (
   <App>
     <Switch>
       <Route path='/contacts' component={Contacts} />
       <Route path='/network' component={Network} />
+      <Route path='/help' component={Help} />
       <Route path='/' component={Activity} />
     </Switch>
   </App>
diff --git a/app/routes/help/components/Help.js b/app/routes/help/components/Help.js
new file mode 100644
index 00000000..255b8408
--- /dev/null
+++ b/app/routes/help/components/Help.js
@@ -0,0 +1,95 @@
+import { shell } from 'electron'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { MdSearch } from 'react-icons/lib/md'
+
+import styles from './Help.scss'
+
+class Help extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      videos: [
+        {
+          id: 'GYIHrd7e-n0',
+          title: 'Joyner Lucas - Mask Off Remix (Mask On)'
+        },
+        {
+          id: 'ZFy7RdZWwj8',
+          title: 'Joyner Lucas - Bank Account (Remix)'
+        },
+        {
+          id: 'DlFmfxACvig',
+          title: 'Lil Skies - Nowadays ft. Landon Cube (Dir. by @_ColeBennett_)'
+        },
+        {
+          id: 'XbZ0OXmXw38',
+          title: 'Dave - Wanna Know ft. Drake (Audio)'
+        },
+        {
+          id: 'sRrcogH7F_I',
+          title: 'Bryson Tiller - How About Now (Freestyle)'
+        },
+        {
+          id: 'j6Np8vCO0hQ',
+          title: 'Young Pappy - Killa (Official Music Video)'
+        },
+        {
+          id: 'PjqKPHZJgF0',
+          title: 'Lil Wayne - Family Feud feat. Drake (Official Audio) | Dedication 6'
+        }
+      ]
+    }
+  }
+
+  render() {
+    const { videos } = this.state
+    return (
+      <div className={styles.helpContainer}>
+        <header className={styles.header}>
+          <h1>Video tutorials</h1>
+        </header>
+
+        <div className={styles.search}>
+          <label className={`${styles.label} ${styles.input}`} htmlFor='helpSearch'>
+            <MdSearch />
+          </label>
+          <input
+            value={''}
+            onChange={event => console.log('gang')}
+            className={`${styles.text} ${styles.input}`}
+            placeholder='Search the video library...'
+            type='text'
+            id='helpSearch'
+          />
+        </div>
+
+        <ul className={styles.videos}>
+          {
+            videos.map((video, index) => {
+              return (
+                <li key={index}>
+                  <iframe
+                    src={`https://www.youtube.com/embed/${video.id}`}
+                    frameBorder='0'
+                  />
+                  <section className={styles.info} onClick={() => shell.openExternal(`https://www.youtube.com/watch?v=${video.id}`)}>
+                    <h2>{video.title}</h2>
+                  </section>
+                </li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    )
+  }
+}
+
+Help.propTypes = {
+  
+}
+
+export default Help
diff --git a/app/routes/help/components/Help.scss b/app/routes/help/components/Help.scss
new file mode 100644
index 00000000..19b85159
--- /dev/null
+++ b/app/routes/help/components/Help.scss
@@ -0,0 +1,88 @@
+@import '../../../variables.scss';
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: $lightgrey;
+  padding: 20px 40px;
+
+  h1 {
+    text-transform: uppercase;
+    font-size: 26px;
+    margin-right: 5px;
+  }
+}
+
+.search {
+  height: 55px;
+  padding: 2px 25px;
+  border-top: 1px solid $darkgrey;
+  border-bottom: 1px solid $darkgrey;
+  background: $white;
+
+  .input {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+  }
+
+  .label {
+    width: 5%;
+    line-height: 50px;
+    font-size: 20px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .text {
+    width: 95%;
+    outline: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    height: 50px;
+    font-size: 16px;
+  }
+}
+
+.videos {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 20px 40px;
+
+  li {
+    position: relative;
+    width: 50%;
+    text-align: center;
+    margin: 20px 0;
+    width: 400px;
+    height: 400px;
+    transition: all 0.25s;
+
+    &:hover {
+      opacity: 0.5;
+
+      .info {
+        padding: 50px 15px;
+      }
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+
+    .info {
+      position: absolute;
+      bottom: 0;
+      width: calc(100% - 30px);
+      padding: 15px;
+      background: $darkgrey;
+      cursor: pointer;
+      transition: all 0.25s;
+    }
+  }
+}
diff --git a/app/routes/help/containers/HelpContainer.js b/app/routes/help/containers/HelpContainer.js
new file mode 100644
index 00000000..f23f5d92
--- /dev/null
+++ b/app/routes/help/containers/HelpContainer.js
@@ -0,0 +1,10 @@
+import { withRouter } from 'react-router'
+import { connect } from 'react-redux'
+
+import Help from '../components/Help'
+
+const mapDispatchToProps = {}
+
+const mapStateToProps = state => ({})
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Help))
diff --git a/app/routes/help/index.js b/app/routes/help/index.js
new file mode 100644
index 00000000..c470f24b
--- /dev/null
+++ b/app/routes/help/index.js
@@ -0,0 +1,3 @@
+import HelpContainer from './containers/HelpContainer'
+
+export default HelpContainer

From 7bfecd9764bfb8b1aa9e43384c82b109f9897c79 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Sat, 20 Jan 2018 21:23:32 -0600
Subject: [PATCH 3/5] feature(help): help videos

---
 app/components/LndSyncing/LndSyncing.js   | 45 ++++++++++++----
 app/components/LndSyncing/LndSyncing.scss |  2 +-
 app/containers/Root.js                    |  6 ++-
 app/main.dev.js                           |  2 +-
 app/reducers/lnd.js                       |  8 ++-
 app/routes/help/components/Help.js        | 63 +++++++++++------------
 app/routes/help/components/Help.scss      |  2 +
 package.json                              |  2 +-
 8 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js
index fd2c6ac7..0caa559f 100644
--- a/app/components/LndSyncing/LndSyncing.js
+++ b/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()
+  }
 
-    fetchBlockHeight()
-    newAddress('np2wkh')
+  componentDidUpdate(prevProps) {
+    const { grpcStarted, newAddress } = this.props
+    
+    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
diff --git a/app/components/LndSyncing/LndSyncing.scss b/app/components/LndSyncing/LndSyncing.scss
index 961c1b0e..43a3efed 100644
--- a/app/components/LndSyncing/LndSyncing.scss
+++ b/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) {
diff --git a/app/containers/Root.js b/app/containers/Root.js
index 22958e49..9c377f04 100644
--- a/app/containers/Root.js
+++ b/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
 }
 
diff --git a/app/main.dev.js b/app/main.dev.js
index 6819a007..fd41d89d 100644
--- a/app/main.dev.js
+++ b/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',
diff --git a/app/reducers/lnd.js b/app/reducers/lnd.js
index eaa19de3..84c1bb2d 100644
--- a/app/reducers/lnd.js
+++ b/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 }
diff --git a/app/routes/help/components/Help.js b/app/routes/help/components/Help.js
index 255b8408..e2f15b68 100644
--- a/app/routes/help/components/Help.js
+++ b/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,19 +67,17 @@ class Help extends Component {
 
         <ul className={styles.videos}>
           {
-            videos.map((video, index) => {
-              return (
-                <li key={index}>
-                  <iframe
-                    src={`https://www.youtube.com/embed/${video.id}`}
-                    frameBorder='0'
-                  />
-                  <section className={styles.info} onClick={() => shell.openExternal(`https://www.youtube.com/watch?v=${video.id}`)}>
-                    <h2>{video.title}</h2>
-                  </section>
-                </li>
-              )
-            })
+            filteredVideos.map((video, index) =>
+              <li key={index}>
+                <iframe
+                  src={`https://www.youtube.com/embed/${video.id}`}
+                  frameBorder='0'
+                />
+                <section className={styles.info} onClick={() => shell.openExternal(`https://www.youtube.com/watch?v=${video.id}`)}>
+                  <h2>{video.title}</h2>
+                </section>
+              </li>
+            )
           }
         </ul>
       </div>
diff --git a/app/routes/help/components/Help.scss b/app/routes/help/components/Help.scss
index 19b85159..a4e74818 100644
--- a/app/routes/help/components/Help.scss
+++ b/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;
     }
   }
 }
diff --git a/package.json b/package.json
index 0323a9a3..59392ec0 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "npm": ">=5.0.0"
   },
   "build": {
-    "productName": "ZapDesktop",
+    "productName": "Zap",
     "appId": "org.develar.ZapDesktop",
     "files": [
       "dist/",

From 4c1b627179f2c775432ac0ca4b61d68714d2da18 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Sun, 21 Jan 2018 21:07:32 -0600
Subject: [PATCH 4/5] fix(sign): sign builds

---
 app/main.dev.js | 6 +++++-
 package.json    | 7 +++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/main.dev.js b/app/main.dev.js
index fd41d89d..0485b86a 100644
--- a/app/main.dev.js
+++ b/app/main.dev.js
@@ -127,7 +127,11 @@ const sendLndSynced = () => {
 
 // Starts the LND node
 const startLnd = () => {
-  const lndPath = path.join(__dirname, '..', 'resources', 'bin', plat, plat === 'win32' ? 'lnd.exe' : 'lnd')
+  let lndPath
+  process.env.NODE_ENV === 'development' ?
+    lndPath = path.join(__dirname, '..', 'resources', 'bin', plat, plat === 'win32' ? 'lnd.exe' : 'lnd')
+    :
+    lndPath = path.join(__dirname, '..', 'bin', plat === 'win32' ? 'lnd.exe' : 'lnd')
 
   const neutrino = spawn(lndPath,
     [
diff --git a/package.json b/package.json
index 59392ec0..460277f5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zap-desktop",
   "productName": "ZapDesktop",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "desktop application for the lightning network",
   "scripts": {
     "build": "concurrently \"npm run build-main\" \"npm run build-renderer\"",
@@ -80,7 +80,10 @@
       "output": "release"
     },
     "extraResources": [
-      "**/resources/bin/darwin/lnd"
+      {
+        "from": "./resources/bin/darwin/lnd",
+        "to": "./bin/lnd"
+      }
     ]
   },
   "repository": {

From 468a4f1dc4baa864b17501e94948ed4471dd2610 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Sun, 21 Jan 2018 21:31:14 -0600
Subject: [PATCH 5/5] fix(lint): fix linting errors

---
 app/components/LndSyncing/LndSyncing.js     |  4 ++--
 app/main.dev.js                             |  5 +++--
 app/routes/help/components/Help.js          | 10 +++-------
 app/routes/help/containers/HelpContainer.js |  2 +-
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js
index 0caa559f..8933416a 100644
--- a/app/components/LndSyncing/LndSyncing.js
+++ b/app/components/LndSyncing/LndSyncing.js
@@ -38,7 +38,7 @@ class LndSyncing extends Component {
 
   componentDidUpdate(prevProps) {
     const { grpcStarted, newAddress } = this.props
-    
+
     if (!prevProps.grpcStarted && grpcStarted) {
       newAddress('np2wkh')
     }
@@ -51,7 +51,7 @@ class LndSyncing extends Component {
 
     const copyOnClick = () => {
       if (!address) { return }
-      
+
       copy(address)
       showNotification('Noice', 'Successfully copied to clipboard')
     }
diff --git a/app/main.dev.js b/app/main.dev.js
index 0485b86a..2a499802 100644
--- a/app/main.dev.js
+++ b/app/main.dev.js
@@ -128,10 +128,11 @@ const sendLndSynced = () => {
 // Starts the LND node
 const startLnd = () => {
   let lndPath
-  process.env.NODE_ENV === 'development' ?
+  if (process.env.NODE_ENV === 'development') {
     lndPath = path.join(__dirname, '..', 'resources', 'bin', plat, plat === 'win32' ? 'lnd.exe' : 'lnd')
-    :
+  } else {
     lndPath = path.join(__dirname, '..', 'bin', plat === 'win32' ? 'lnd.exe' : 'lnd')
+  }
 
   const neutrino = spawn(lndPath,
     [
diff --git a/app/routes/help/components/Help.js b/app/routes/help/components/Help.js
index e2f15b68..0eb5f8d6 100644
--- a/app/routes/help/components/Help.js
+++ b/app/routes/help/components/Help.js
@@ -1,6 +1,5 @@
 import { shell } from 'electron'
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { MdSearch } from 'react-icons/lib/md'
 
@@ -67,17 +66,18 @@ class Help extends Component {
 
         <ul className={styles.videos}>
           {
-            filteredVideos.map((video, index) =>
+            filteredVideos.map((video, index) => (
               <li key={index}>
                 <iframe
                   src={`https://www.youtube.com/embed/${video.id}`}
                   frameBorder='0'
+                  title={video.id}
                 />
                 <section className={styles.info} onClick={() => shell.openExternal(`https://www.youtube.com/watch?v=${video.id}`)}>
                   <h2>{video.title}</h2>
                 </section>
               </li>
-            )
+            ))
           }
         </ul>
       </div>
@@ -85,8 +85,4 @@ class Help extends Component {
   }
 }
 
-Help.propTypes = {
-  
-}
-
 export default Help
diff --git a/app/routes/help/containers/HelpContainer.js b/app/routes/help/containers/HelpContainer.js
index f23f5d92..37165e99 100644
--- a/app/routes/help/containers/HelpContainer.js
+++ b/app/routes/help/containers/HelpContainer.js
@@ -5,6 +5,6 @@ import Help from '../components/Help'
 
 const mapDispatchToProps = {}
 
-const mapStateToProps = state => ({})
+const mapStateToProps = () => ({})
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Help))