feature(payform): new description

app/components/Form/Pay.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import find from 'lodash/find'
 
 import Isvg from 'react-inlinesvg'
 import paperPlane from 'icons/paper_plane.svg'
+import link from 'icons/link.svg'
 
-import { FaBolt, FaChain, FaAngleDown } from 'react-icons/lib/fa'
+import { FaAngleDown } from 'react-icons/lib/fa'
 import LoadingBolt from 'components/LoadingBolt'
 import CurrencyIcon from 'components/CurrencyIcon'
 
@@ -27,9 +29,10 @@ class Pay extends Component {
 
   render() {
     const {
-      payform: { amount, payInput, showErrors },
+      payform: { amount, payInput, showErrors, invoice },
       currency,
       crypto,
+      nodes,
 
       isOnchain,
       isLn,
@@ -48,7 +51,16 @@ class Pay extends Component {
       onPaySubmit
     } = this.props
 
-    console.log('usdAmount: ', usdAmount)
+    const displayNodeName = (pubkey) => {
+      console.log('nodes: ', nodes)
+      console.log('pubkey: ', pubkey)
+      const node = find(nodes, n => n.pub_key === pubkey)
+
+      console.log('node: ', node)
+      if (node && node.alias.length) { return node.alias }
+
+      return pubkey.substring(0, 10)
+    }
 
     return (
       <div className={styles.container}>
@@ -62,7 +74,20 @@ class Pay extends Component {
           <section className={styles.destination}>
             <div className={styles.top}>
               <label htmlFor='destination'>Destination</label>
-              <span>
+              <span className={`${styles.description} ${(isOnchain || isLn) && styles.active}`}>
+                {isOnchain &&
+                  <i>
+                    <Isvg src={link} />
+                    <span>On-Chain (~10 minutes)</span>
+                  </i>
+                }
+                {isLn &&
+                  <i>
+                    <span>
+                      {displayNodeName(invoice.destination)} ({invoice.description})
+                    </span>
+                  </i>
+                }
               </span>
             </div>
             <div className={styles.bottom}>
@@ -73,7 +98,7 @@ class Pay extends Component {
                 onChange={event => setPayInput(event.target.value)}
                 onBlur={onPayInputBlur}
                 id='destination'
-                rows='4'
+                rows='2'
               />
             </div>
           </section>

app/components/Form/Pay.scss

@@ -25,6 +25,26 @@
 
   .destination {
     margin-bottom: 25px;
+
+    .description {
+      font-size: 12px;
+      line-height: 14px;
+      padding: 10px 15px;
+      min-height: 14px;
+
+      &.active {
+        background: #23252f;
+        border-radius: 10px;
+        min-height: 0;
+      }
+    }
+
+    svg {
+      width: 10px;
+      height: 10px;
+      line-height: 14px;
+      margin-right: 5px;
+    }
   }
 
   .amount .bottom {
@@ -34,12 +54,16 @@
 
     input {
       font-size: 40px;
-      max-width: 250px;
+      max-width: 230px;
     }
   }
 
   .top {
-    margin-bottom: 30px;
+    margin-bottom: 25px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 
     label {
       font-size: 14px;
@@ -95,6 +119,7 @@
 
   .usdAmount {
     margin-top: 20px;
+    opacity: 0.5;
   }
 
   .submit {

app/reducers/payform.js

@@ -15,7 +15,9 @@ const initialState = {
   invoice: {
     payreq: '',
     r_hash: '',
-    amount: '0'
+    amount: '0',
+    description: '',
+    destination: ''
   },
 
   showErrors: {

app/routes/app/containers/AppContainer.js

@@ -156,6 +156,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     payform: stateProps.payform,
     currency: stateProps.ticker.currency,
     crypto: stateProps.ticker.crypto,
+    nodes: stateProps.network.nodes,
 
     isOnchain: stateProps.isOnchain,
     isLn: stateProps.isLn,