fetaure(transactionForm): create transaction form component

app/components/Network/NetworkGraph.js

@@ -37,7 +37,6 @@ class NetworkGraph extends Component {
       )
     }
 
-    console.log('selectedChannelIds: ', selectedChannelIds)
     return (
       <section className={styles.network}>
         <ForceGraph

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 {
+.network {
-//   width: 100%;
+  width: 100%;
-//   height: 100vh;
+  height: 100vh;
-//   animation: fadein 0.5s;
+  animation: fadein 0.5s;
-//   animation-timing-function:linear;
+  animation-timing-function:linear;
-//   animation-fill-mode:forwards;
+  animation-fill-mode:forwards;
-//   animation-iteration-count: 1;
+  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;
-//   }
-// }
 
 .node {
   stroke-width: 2 !important;
+  animation: color-change 1s infinite;
 }
 
 .activeEdge {

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

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
       }
     }

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; 
     }
   }