From 1c5fbd78660bb14c2f31720ccba15c27be3bfd75 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 10 Oct 2017 22:44:04 -0500
Subject: [PATCH] feature(UI for LndSyncing)

---
 app/components/LndSyncing/LndSyncing.js   | 71 +++++++++++++++++++----
 app/components/LndSyncing/LndSyncing.scss | 36 ++++++++++++
 app/routes/app/components/App.js          |  1 -
 3 files changed, 97 insertions(+), 11 deletions(-)

diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js
index 1636395a..8bd44bf9 100644
--- a/app/components/LndSyncing/LndSyncing.js
+++ b/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 = () => (
-  <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>
-)
+class LndSyncing extends Component {
+  constructor(props) {
+  super(props);
+    this.state = {
+      facts: [
+        {
+          title: 'No2x',
+          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
diff --git a/app/components/LndSyncing/LndSyncing.scss b/app/components/LndSyncing/LndSyncing.scss
index fbe2dcbe..4eb0f01c 100644
--- a/app/components/LndSyncing/LndSyncing.scss
+++ b/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 {
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index 7a40682e..08f5ef29 100644
--- a/app/routes/app/components/App.js
+++ b/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 /> }