feature(close channel): allow capability to close channel

app/components/Channels/Channel.js

@@ -4,68 +4,80 @@ import { FaCircle } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from './Channel.scss'
 
-const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
+const Channel = ({ ticker, channel, closeChannel, currentTicker }) => (
   <li className={styles.channel} onClick={() => setChannel(channel)}>
-    <header>
-      <span className={styles.status}>Open</span>
-      {
-        channel.active ?
-          <span className={styles.active}>
-            <FaCircle />
-            <i>Active</i>
-          </span>
-          :
-          <span className={styles.notactive}>
-            <FaCircle />
-            <i>Not Active</i>
-          </span>
-      }
+    <header className={styles.header}>
+      <div>
+        <span className={styles.status}>Open</span>
+        {
+          channel.active ?
+            <span className={styles.active}>
+              <FaCircle />
+              <i>Active</i>
+            </span>
+            :
+            <span className={styles.notactive}>
+              <FaCircle />
+              <i>Not Active</i>
+            </span>
+        }
+      </div>
+      <div>
+        <p
+          className={styles.close}
+          onClick={() => closeChannel({ channel_point: channel.channel_point })}
+        >
+          Close channel
+        </p>
+      </div>
     </header>
-    <div className={styles.left}>
-      <section className={styles.remotePubkey}>
-        <span>Remote Pubkey</span>
-        <h4>{channel.remote_pubkey}</h4>
-      </section>
-      <section className={styles.channelPoint}>
-        <span>Channel Point</span>
-        <h4>{channel.channel_point}</h4>
-      </section>
-    </div>
-    <div className={styles.right}>
-      <section className={styles.capacity}>
-        <span>Capacity</span>
-        <h2>
-          {
-            ticker.currency === 'btc' ?
-              btc.satoshisToBtc(channel.capacity)
-              :
-              btc.satoshisToUsd(channel.capacity, currentTicker.price_usd)
-          }
-        </h2>
-      </section>
-      <div className={styles.balances}>
-        <section>
-          <span>Local</span>
-          <h4>
-            {
-              ticker.currency === 'btc' ?
-                btc.satoshisToBtc(channel.local_balance)
-                :
-                btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
-            }
-          </h4>
+    <div className={styles.content}>
+      <div className={styles.left}>
+        <section className={styles.remotePubkey}>
+          <span>Remote Pubkey</span>
+          <h4>{channel.remote_pubkey}</h4>
         </section>
-        <section>
-          <span>Remote</span>
-          <h4>
+        <section className={styles.channelPoint}>
+          <span>Channel Point</span>
+          <h4>{channel.channel_point}</h4>
+        </section>
+      </div>
+      <div className={styles.right}>
+        <section className={styles.capacity}>
+          <span>Capacity</span>
+          <h2>
             {
               ticker.currency === 'btc' ?
-                btc.satoshisToBtc(channel.remote_balance)
+                btc.satoshisToBtc(channel.capacity)
                 :
-                btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
+                btc.satoshisToUsd(channel.capacity, currentTicker.price_usd)
             }
-          </h4>
+          </h2>
         </section>
+        <div className={styles.balances}>
+          <section>
+            <span>Local</span>
+            <h4>
+              {
+                ticker.currency === 'btc' ?
+                  btc.satoshisToBtc(channel.local_balance)
+                  :
+                  btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
+              }
+            </h4>
+          </section>
+          <section>
+            <span>Remote</span>
+            <h4>
+              {
+                ticker.currency === 'btc' ?
+                  btc.satoshisToBtc(channel.remote_balance)
+                  :
+                  btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
+              }
+            </h4>
+          </section>
+        </div>
       </div>
     </div>
   </li>
@@ -74,7 +86,7 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
 Channel.propTypes = {
   ticker: PropTypes.object.isRequired,
   channel: PropTypes.object.isRequired,
-  setChannel: PropTypes.func.isRequired,
+  closeChannel: PropTypes.func.isRequired,
   currentTicker: PropTypes.object.isRequired
 }
 

app/components/Channels/Channel.scss

@@ -5,9 +5,6 @@
 	background: $lightgrey;
 	margin: 5px 0;
 	padding: 10px;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
 	border-top: 1px solid $white;
 	cursor: pointer;
 	transition: all 0.25s;
@@ -20,10 +17,10 @@
 		border: none;
 	}
 
-	header {
-		position: absolute;
-		top: 10px;
-		left: 10px;
+	.header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
 
 		.status, .active, .notactive {
 			padding: 10px;
@@ -47,6 +44,25 @@
 		.notactive {
 			color: $red;
 		}
+
+		.close {
+			padding: 10px;
+			font-size: 10px;
+			text-transform: uppercase;
+			color: $red;
+			cursor: pointer;
+
+			&:hover {
+				color: lighten($red, 10%);
+				text-decoration: underline;
+			}
+		}
+	}
+
+	.content {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
 	}
 
 

app/reducers/channels.js

@@ -206,7 +206,7 @@ const ACTION_HANDLERS = {
 
   [GET_CHANNELS]: state => ({ ...state, channelsLoading: true }),
   [RECEIVE_CHANNELS]: (state, { channels, pendingChannels }) => (
-    { ...state, channelsLoading: false, channels, pendingChannels: state.pendingChannels }
+    { ...state, channelsLoading: false, channels, pendingChannels }
   ),
 
   [OPENING_CHANNEL]: state => ({ ...state, openingChannel: true }),

app/routes/channels/components/Channels.js

@@ -24,6 +24,7 @@ class Channels extends Component {
   render() {
     const {
       fetchChannels,
+      closeChannel,
       channels: {
         searchQuery,
         filterPulldown,
@@ -157,7 +158,7 @@ class Channels extends Component {
                       key={index}
                       ticker={ticker}
                       channel={channel}
-                      setChannel={() => {}}
+                      closeChannel={closeChannel}
                       currentTicker={currentTicker}
                     />
                   )

app/routes/channels/containers/ChannelsContainer.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import {
   fetchChannels,
   openChannel,
+  closeChannel,
   updateChannelSearchQuery,
   setViewType,
   currentChannels,
@@ -35,6 +36,7 @@ import Channels from '../components/Channels'
 const mapDispatchToProps = {
   fetchChannels,
   openChannel,
+  closeChannel,
   updateChannelSearchQuery,
   setViewType,
   toggleFilterPulldown,