Disable amount field for invoice payment requests

Author: bulenttastan

packages/lightning-core/common/Input.js

@@ -27,7 +27,7 @@ export class Input extends React.Component {
 
   render() {
     const { name, right, left, type, placeholder, value, sanitizeReturn,
-      onChange, outlineColor, fullWidth } = this.props
+      onChange, outlineColor, fullWidth, disabled } = this.props
     const styles = reactCSS({
       'default': {
         bg: {
@@ -74,8 +74,8 @@ export class Input extends React.Component {
           type={ type }
           placeholder={ placeholder }
           value={ value }
+          disabled={ disabled }
           onChange={ handleChange }
-
           onFocus={ this.handleFocus }
           onBlur={ this.handleBlur }
         />

packages/lightning-core/pay/index.js

@@ -19,7 +19,7 @@ export const Pay = ({ onMakePayment, onDecodePaymentRequest, onEditForm,
       placeholder: 'Payment Request / Bitcoin Address',
       required: true,
       component: Input,
-	  
+
     },
     {
       name: 'amount',
@@ -28,7 +28,7 @@ export const Pay = ({ onMakePayment, onDecodePaymentRequest, onEditForm,
       component: CurrencyInput,
     },
   ]
-  
+
   const menu = new Menu()
   menu.append(new MenuItem({ label: 'Paste', role: 'paste' }))
   const handleMenu = () => menu.popup(remote.getCurrentWindow())
@@ -48,11 +48,14 @@ export const Pay = ({ onMakePayment, onDecodePaymentRequest, onEditForm,
   }
 
   const handleChange = (change) => {
+    fields[1].disabled = false
     if (change.address) {
       const paymentRequest = sanitizePaymentRequest(change.address)
       onDecodePaymentRequest({ paymentRequest })
         .then((decoded) => {
           const amount = decoded.num_satoshis
+          // Disable the amount field when using payment requests
+          fields[1].disabled = true
           onEditForm('pay', { amount })
         })
         .catch(console.error)
@@ -66,7 +69,7 @@ export const Pay = ({ onMakePayment, onDecodePaymentRequest, onEditForm,
         body="Lightning payments will be instant, while on-chain Bitcoin
               transactions require at least one confirmation (approx. 10 mins)"
       />
-      <div onContextMenu={ handleMenu } >	
+      <div onContextMenu={ handleMenu } >
         <Form
           name="pay"
           fields={ fields }

packages/lightning-forms/components/Field.js

@@ -2,7 +2,7 @@ import React from 'react'
 import reactCSS from 'reactcss'
 
 export const Field = ({ name, type, placeholder, value, component, onChange,
-  errorText, error }) => {
+  disabled, errorText, error }) => {
   const styles = reactCSS({
     'default': {
       field: {
@@ -31,6 +31,7 @@ export const Field = ({ name, type, placeholder, value, component, onChange,
         type={ type }
         placeholder={ placeholder }
         value={ value }
+        disabled={ disabled }
         onChange={ handleChange }
         outlineColor={ error && 'rgba(213, 61, 80, 0.3)' }
       />