Update Channel Status Styling

Author: casesandberg

.eslintrc.js

@@ -1 +1,6 @@
-module.exports = { extends: '@case/eslint-config' }
+module.exports = {
+  extends: '@case/eslint-config',
+  rules: {
+    'import/imports-first': 0,
+  }
+}

packages/lightning-core/accounts/ChannelListItem.js

@@ -15,6 +15,10 @@ const { Menu, MenuItem } = remote
 export const ChannelListItem = ({ id, capacity, localBalance, remoteBalance,
   active, status, hover, channelPoint, onShowPopup, onClosePopup, onCloseChannel,
   onSuccess, onFetchChannels }) => {
+  const pending = status === 'pending-open'
+               || status === 'pending-closing'
+               || status === 'pending-force-closing'
+
   const styles = reactCSS({
     'default': {
       channel: {
@@ -86,9 +90,9 @@ export const ChannelListItem = ({ id, capacity, localBalance, remoteBalance,
         background: 'light-gray',
       },
     },
-  }, { hover, pending: status === 'pending' || status === 'closing' })
+  }, { hover, pending })
 
-  const PROMPT = 'CHANNEL_LIST/PROMPT'
+  const PROMPT = `CHANNEL_LIST/PROMPT-${ channelPoint }`
 
   // eslint-disable-next-line
   const close = ({ channelPoint, force }) => {
@@ -112,13 +116,19 @@ export const ChannelListItem = ({ id, capacity, localBalance, remoteBalance,
   const handleCancel = () => onClosePopup(PROMPT)
 
   const width = `${ (localBalance / capacity) * 100 }%`
+  const title = {
+    'open': `CID: ${ id }`,
+    'pending-open': 'OPENING',
+    'pending-closing': 'CLOSING',
+    'pending-force-closing': 'CLOSING',
+  }[status]
 
   return (
     <div style={ styles.channel } onContextMenu={ handleMenu }>
       <div style={ styles.split }>
         <div style={ styles.id }>
-          { status === 'pending' ? 'PENDING' : `CID:${ id }` }
-          { status !== 'pending' && status !== 'closing' && (
+          { title }
+          { !pending && (
             <div style={ styles.closeLabel } onClick={ showPopupOrClose }>
               <Icon small name="close" />
             </div>

packages/lightning-core/accounts/reducer.js

@@ -114,17 +114,55 @@ export const actions = {
     [GRPC]: {
       method: 'pendingChannels',
       types: [null, PENDING_CHANNELS, FETCH_CHANNELS_FAILURE],
-      schema: data => ({
-        channels: _.map(data.pending_channels, channel => ({
-          remotePubkey: channel.identity_key,
-          id: 'PENDING',
-          capacity: channel.capacity,
-          localBalance: channel.local_balance,
-          remoteBalance: channel.remote_balance,
-          channelPoint: channel.channel_point,
-          status: channel.status,
-        })),
-      }),
+      schema: (data) => {
+        const decorateChannels = (channels, transform) =>
+          _.map(channels, channel => ({
+            remotePubkey: channel.remote_node_pub,
+            capacity: channel.capacity,
+            localBalance: channel.local_balance,
+            remoteBalance: channel.remote_balance,
+            channelPoint: channel.channel_point,
+            ...transform(channel),
+          }))
+
+        return {
+          channels: [
+            ...decorateChannels(data.pending_open_channels, () => ({ status: 'pending-open' })),
+            ...decorateChannels(data.pending_closing_channels, () => ({ status: 'pending-closing' })),
+            ...decorateChannels(data.pending_force_closing_channels, () => ({ status: 'pending-force-closing' })),
+            // {
+            //   remotePubkey: '1asd78964b54ad8f8og7a59sfg6s4d7f6g4a538dfs97gsd',
+            //   id: '1925401284578204',
+            //   capacity: '40000',
+            //   localBalance: '4000',
+            //   remoteBalance: '36000',
+            //   channelPoint: '1',
+            //   status: 'open',
+            // }, {
+            //   remotePubkey: 'asd0fg864a8df79g876adf98g69sd86f7g46s8d68f57gi6',
+            //   capacity: '4000',
+            //   localBalance: '2000',
+            //   remoteBalance: '2000',
+            //   channelPoint: '2',
+            //   status: 'pending-open',
+            // }, {
+            //   remotePubkey: 'vafgg3zf789s78df97a0s9f867g3s6df5fdgsghafd9hg876ad',
+            //   capacity: '100000',
+            //   localBalance: '90000',
+            //   remoteBalance: '10000',
+            //   channelPoint: '3',
+            //   status: 'pending-closing',
+            // }, {
+            //   remotePubkey: 'xzcb8976d4bv645z657v6ba6pfdb9s8d7gb537sf6g43b42s3',
+            //   capacity: '4400',
+            //   localBalance: '1900',
+            //   remoteBalance: '2500',
+            //   channelPoint: '4',
+            //   status: 'pending-force-closing',
+            // },
+          ],
+        }
+      },
     },
   }),
   listChannels: () => ({