feat(channels): warn when opening multiple channels to the same node

app/components/Contacts/SubmitChannelForm.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
+import FaExclamationCircle from 'react-icons/lib/fa/exclamation-circle'
 
 import AmountInput from 'components/AmountInput'
 import styles from './SubmitChannelForm.scss'
@@ -17,6 +18,7 @@ class SubmitChannelForm extends React.Component {
       updateContactCapacity,
       openChannel,
       fiatTicker,
+      dupeChanInfo,
 
       ticker,
 
@@ -40,6 +42,22 @@ class SubmitChannelForm extends React.Component {
       return node.pub_key
     }
 
+    const renderWarning = dupeChanInfo => {
+      const { alias, activeChannels, capacity, currencyName } = dupeChanInfo
+
+      const chansMsg =
+        activeChannels === 1 ? ' an active channel ' : ` ${activeChannels} active channels `
+      const aliasMsg = alias ? <span className={styles.alias}>{alias}</span> : ' this node '
+
+      return (
+        <p>
+          {`You currently have ${chansMsg} open to `}
+          {aliasMsg}
+          {` with a capacity of ${capacity} ${currencyName}.`}
+        </p>
+      )
+    }
+
     const formSubmitted = () => {
       // dont submit to LND if they havent set channel capacity amount
       if (contactCapacity <= 0) {
@@ -75,6 +93,13 @@ class SubmitChannelForm extends React.Component {
           <h2>{renderTitle()}</h2>
         </section>
 
+        {dupeChanInfo && (
+          <section className={styles.warn}>
+            <FaExclamationCircle className={styles.exclamation} style={{ verticalAlign: 'top' }} />
+            {renderWarning(dupeChanInfo)}
+          </section>
+        )}
+
         <section className={styles.amount}>
           <div className={styles.input}>
             <AmountInput
@@ -128,6 +153,7 @@ SubmitChannelForm.propTypes = {
   updateContactCapacity: PropTypes.func.isRequired,
   openChannel: PropTypes.func.isRequired,
   fiatTicker: PropTypes.string.isRequired,
+  dupeChanInfo: PropTypes.object,
 
   ticker: PropTypes.object.isRequired,
 

app/components/Contacts/SubmitChannelForm.scss

@@ -39,6 +39,32 @@
   }
 }
 
+.warn {
+  color: #dea326;
+  margin: 20px 0;
+  display: flex;
+
+  p {
+    flex: 1;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .exclamation {
+    flex: 0 0 25px;
+    vertical-align: top;
+  }
+
+  .alias {
+    background: #252832;
+    padding: 2px 5px 4px;
+    border-radius: 8px;
+    display: inline;
+    color: #fff;
+    font-size: 10px;
+  }
+}
+
 .input {
   display: flex;
   flex-direction: row;

app/reducers/contactsform.js

@@ -201,6 +201,8 @@ const manualSearchQuerySelector = state => state.contactsform.manualSearchQuery
 const contactCapacitySelector = state => state.contactsform.contactCapacity
 const currencySelector = state => state.ticker.currency
 const fiatTickerSelector = state => state.ticker.fiatTicker
+const nodeSelector = state => state.contactsform.node
+const channelsSelector = state => state.channels.channels
 
 const contactable = node => node.addresses.length > 0
 
@@ -285,6 +287,40 @@ contactFormSelectors.contactFormFiatAmount = createSelector(
   }
 )
 
+// compose warning info when a channel is being created with a node that
+// already has one or more active channels open
+contactFormSelectors.dupeChanInfo = createSelector(
+  channelsSelector,
+  nodeSelector,
+  networkNodesSelector,
+  currencySelector,
+  tickerSelectors.currencyName,
+  (activeChannels, newNode, allNodes, currency, currencyName) => {
+    const chans = activeChannels.filter(
+      chan => chan.active && chan.remote_pubkey === newNode.pub_key
+    )
+
+    if (!chans.length) {
+      return null
+    }
+
+    const node = allNodes.filter(node => node.pub_key === newNode.pub_key)[0]
+    // use the alias unless its the first 20 chars of the pub_key
+    const alias =
+      node && node.alias !== node.pub_key.substring(0, node.alias.length) ? node.alias : null
+
+    const totalSats = chans.reduce((agg, chan) => agg + parseInt(chan.capacity, 10), 0)
+    const capacity = parseFloat(btc.convert('sats', currency, totalSats))
+
+    return {
+      alias,
+      activeChannels: chans.length,
+      capacity,
+      currencyName
+    }
+  }
+)
+
 export { contactFormSelectors }
 
 // ------------------------------------

app/routes/app/containers/AppContainer.js

@@ -183,6 +183,7 @@ const mapStateToProps = state => ({
   showManualForm: contactFormSelectors.showManualForm(state),
   manualFormIsValid: contactFormSelectors.manualFormIsValid(state),
   contactFormFiatAmount: contactFormSelectors.contactFormFiatAmount(state),
+  dupeChanInfo: contactFormSelectors.dupeChanInfo(state),
 
   currentChannels: currentChannels(state),
   activeChannelPubkeys: channelsSelectors.activeChannelPubkeys(state),
@@ -408,6 +409,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     node: stateProps.contactsform.node,
     contactCapacity: stateProps.contactsform.contactCapacity,
     fiatTicker: stateProps.ticker.fiatTicker,
+    dupeChanInfo: stateProps.dupeChanInfo,
 
     updateContactCapacity: dispatchProps.updateContactCapacity,