From 7824860ead27320cb70e407e86fc7992f2c731e2 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 4 Dec 2017 22:14:09 -0600
Subject: [PATCH] fetaure(transactionForm): create transaction form component

---
 app/components/Network/NetworkGraph.js      |  1 -
 app/components/Network/NetworkGraph.scss    | 31 +++++++--------------
 app/components/Network/TransactionForm.js   | 14 ++++++++++
 app/components/Network/TransactionForm.scss |  0
 app/routes/network/components/Network.js    |  3 +-
 app/routes/network/components/Network.scss  |  2 +-
 6 files changed, 27 insertions(+), 24 deletions(-)
 create mode 100644 app/components/Network/TransactionForm.js
 create mode 100644 app/components/Network/TransactionForm.scss

diff --git a/app/components/Network/NetworkGraph.js b/app/components/Network/NetworkGraph.js
index 38f3a4e6..b182d267 100644
--- a/app/components/Network/NetworkGraph.js
+++ b/app/components/Network/NetworkGraph.js
@@ -37,7 +37,6 @@ class NetworkGraph extends Component {
       )
     }
 
-    console.log('selectedChannelIds: ', selectedChannelIds)
     return (
       <section className={styles.network}>
         <ForceGraph
diff --git a/app/components/Network/NetworkGraph.scss b/app/components/Network/NetworkGraph.scss
index cdc867e6..6a60cf98 100644
--- a/app/components/Network/NetworkGraph.scss
+++ b/app/components/Network/NetworkGraph.scss
@@ -23,33 +23,22 @@
     font-size: 22px;
     text-align: center;
     margin-top: calc(50% - 22px);
+    animation: color-change 1s infinite;
   }
 }
 
-// .container {
-//   width: 100%;
-//   height: 100vh;
-//   animation: fadein 0.5s;
-//   animation-timing-function:linear;
-//   animation-fill-mode:forwards;
-//   animation-iteration-count: 1;
-
-//   line.active {
-//     opacity: 1;
-//     stroke: green;
-//     stroke-width: 5;
-//     stroke-dasharray: 100;
-//     animation: dash 2.5s infinite linear;
-//   }
-
-//   circle {
-//     cursor: pointer;
-//     stroke-width: 2 !important;
-//   }
-// }
+.network {
+  width: 100%;
+  height: 100vh;
+  animation: fadein 0.5s;
+  animation-timing-function:linear;
+  animation-fill-mode:forwards;
+  animation-iteration-count: 1;
+}
 
 .node {
   stroke-width: 2 !important;
+  animation: color-change 1s infinite;
 }
 
 .activeEdge {
diff --git a/app/components/Network/TransactionForm.js b/app/components/Network/TransactionForm.js
new file mode 100644
index 00000000..8c305215
--- /dev/null
+++ b/app/components/Network/TransactionForm.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './TransactionForm.scss'
+
+const TransactionForm = ({}) => (
+  <div className={styles.transactionForm}>
+    tx form
+  </div>
+)
+
+TransactionForm.propTypes = {
+}
+
+export default TransactionForm
diff --git a/app/components/Network/TransactionForm.scss b/app/components/Network/TransactionForm.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/network/components/Network.js b/app/routes/network/components/Network.js
index f0c774e2..4df80ba9 100644
--- a/app/routes/network/components/Network.js
+++ b/app/routes/network/components/Network.js
@@ -6,6 +6,7 @@ import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis
 import NetworkGraph from 'components/Network/NetworkGraph'
 import PeersList from 'components/Network/PeersList'
 import ChannelsList from 'components/Network/ChannelsList'
+import TransactionForm from 'components/Network/TransactionForm'
 
 import styles from './Network.scss'
 
@@ -44,7 +45,7 @@ class Network extends Component {
           return <ChannelsList channels={activeChannels} updateSelectedChannels={updateSelectedChannels} selectedChannelIds={selectedChannelIds} />
           break
         case 3:
-          return <h1>transactions</h1>
+          return <TransactionForm />
           break
       }
     }
diff --git a/app/routes/network/components/Network.scss b/app/routes/network/components/Network.scss
index 0bcefb0e..4d49bffe 100644
--- a/app/routes/network/components/Network.scss
+++ b/app/routes/network/components/Network.scss
@@ -73,7 +73,7 @@
       border-bottom: 1px solid #88D4A2; 
     }
 
-    &.transactionsTab:hover, &.transitionsTab.active {
+    &.transactionsTab:hover, &.transactionsTab.active {
       border-bottom: 1px solid #FFDC53; 
     }
   }