feature(UI for LndSyncing)

app/components/LndSyncing/LndSyncing.js

@@ -1,14 +1,65 @@
-import React from 'react'
+import React, { Component } from 'react'
 import styles from './LndSyncing.scss'
 
-const LndSyncing = () => (
+class LndSyncing extends Component {
-  <div className={styles.container}>
+  constructor(props) {
-    <h3>zap</h3>
+  super(props);
-    <div className={styles.loading}>
+    this.state = {
-      <div className={styles.spinner}></div>
+      facts: [
-      <h1>syncing your lightning node to the blockchain</h1>
+        {
-    </div>
+          title: 'No2x',
-  </div>
+          description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA. It is bullshit. Fuck that shit.'
-)
+        },
+        {
+          title: 'Gang',
+          description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA. It is bullshit. Fuck that shit.'
+        },
+        {
+          title: 'Yo',
+          description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA. It is bullshit. Fuck that shit.'
+        },
+        {
+          title: 'Liiiiit',
+          description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA. It is bullshit. Fuck that shit.'
+        }
+      ],
+      currentFact: 0
+    }
+  }
+
+  render() {
+    const { facts, currentFact } = this.state
+    const renderCurrentFact = facts[currentFact]
+
+    return (
+      <div className={styles.container}>
+        <h3>zap</h3>
+        <div className={styles.loading}>
+          <div className={styles.spinner}></div>
+          <h1>syncing your lightning node to the blockchain</h1>
+        </div>
+        <div className={styles.facts}>
+          <div className={styles.fact}>
+            <h2>{renderCurrentFact.title}</h2>
+            <p>{renderCurrentFact.description}</p>
+          </div>
+          <ul>
+            {
+              facts.map((facts, index) => {
+                return (
+                  <li
+                    className={`${styles.factButton} ${currentFact === index && styles.active}`}
+                    key={index}
+                    onClick={() => this.setState({ currentFact: index })}
+                  />
+                )
+              })
+            }
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
 
 export default LndSyncing

app/components/LndSyncing/LndSyncing.scss

@@ -16,6 +16,42 @@
       margin-top: 25px;
     }
   }
+
+  .facts {
+    position: absolute;
+    bottom: 10%;
+
+    .fact {
+      transition: all 0.25s;
+      h2 {
+        font-size: 50px;
+        margin-bottom: 10px;
+      }
+
+      p {
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  .factButton {
+    cursor: pointer;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: $black;
+    opacity: 0.5;
+    border-radius: 50%;
+    margin: 0 5px;
+
+    &:hover {
+      opacity: 0.25;
+    }
+
+    &.active {
+      opacity: 0.25;
+    }
+  }
 }
 
 .spinner {

app/routes/app/components/App.js

@@ -39,7 +39,6 @@ class App extends Component {
     } = this.props
 
     if (lnd.syncing) { return <LndSyncing /> }
-    // if (true) { return <LndSyncing lines={[]} /> }
 
     if (!currentTicker) { return <LoadingBolt /> }