diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js
index a88dd950..ced4d19d 100644
--- a/app/components/Form/Pay.js
+++ b/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 (
@@ -62,7 +74,20 @@ class Pay extends Component {
-
+
+ {isOnchain &&
+
+
+ On-Chain (~10 minutes)
+
+ }
+ {isLn &&
+
+
+ {displayNodeName(invoice.destination)} ({invoice.description})
+
+
+ }
@@ -73,7 +98,7 @@ class Pay extends Component {
onChange={event => setPayInput(event.target.value)}
onBlur={onPayInputBlur}
id='destination'
- rows='4'
+ rows='2'
/>
diff --git a/app/components/Form/Pay.scss b/app/components/Form/Pay.scss
index 98ec2b17..52997373 100644
--- a/app/components/Form/Pay.scss
+++ b/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 {
diff --git a/app/reducers/payform.js b/app/reducers/payform.js
index db17dbf2..da66ecc4 100644
--- a/app/reducers/payform.js
+++ b/app/reducers/payform.js
@@ -15,7 +15,9 @@ const initialState = {
invoice: {
payreq: '',
r_hash: '',
- amount: '0'
+ amount: '0',
+ description: '',
+ destination: ''
},
showErrors: {
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js
index f0cc5faa..bd39879d 100644
--- a/app/routes/app/containers/AppContainer.js
+++ b/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,