Unpolished but working desktop zero value payments.

Author: emiljoha

src/action/payment.js

@@ -206,6 +206,26 @@ class PaymentAction {
     }
   }
 
+  /**
+   * Estimate the lightning transaction fee using the queryRoutes grpc api
+   * after which the fee is set in the store.
+   * @param  {number} options.satAmt      The amount to be payed in satoshis
+   * @return {Promise<undefined>}
+   */
+  async estimateLightningFeeForAmount({ amount }) {
+    try {
+      const request = await this._grpc.sendCommand('decodePayReq', {
+        payReq: this._store.payment.address,
+      });
+      this.estimateLightningFee({
+        destination: request.destination,
+        satAmt: toSatoshis(amount, this._store.settings),
+      });
+    } catch (err) {
+      log.info(`Estimating lightning fee failed!`, err);
+    }
+  }
+
   /**
    * Estimate the lightning transaction fee using the queryRoutes grpc api
    * after which the fee is set in the store.
@@ -328,7 +348,8 @@ class PaymentAction {
   }
 
   /**
-   * Send the amount specified in the invoice as a lightning transaction and
+   * Send the amount specified in the payment.amount. If zero use the amount
+   * specified in the invoice as a lightning transaction and
    * display the wait screen while the payment confirms.
    * This action can be called from a view event handler as does all
    * the necessary error handling and notification display.
@@ -343,6 +364,8 @@ class PaymentAction {
     try {
       this._nav.goWait();
       const invoice = this._store.payment.address;
+      const { settings } = this._store;
+      const satAmt = toSatoshis(this._store.payment.amount, settings);
       const stream = this._grpc.sendStreamCommand('sendPayment');
       await new Promise((resolve, reject) => {
         stream.on('data', data => {
@@ -353,7 +376,13 @@ class PaymentAction {
           }
         });
         stream.on('error', reject);
-        stream.write(JSON.stringify({ paymentRequest: invoice }), 'utf8');
+        stream.write(
+          JSON.stringify({
+            paymentRequest: invoice,
+            amt: satAmt,
+          }),
+          'utf8'
+        );
       });
       if (failed) return;
       this._nav.goPayLightningDone();

src/view/pay-lightning-supply-amount.js

@@ -4,78 +4,82 @@ import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Background from '../component/background';
 import MainContent from '../component/main-content';
-import { NamedField } from '../component/field';
+import { NamedField, AmountInputField } from '../component/field';
 import { Header, Title } from '../component/header';
-import { CancelButton, BackButton, PillButton } from '../component/button';
+import {
+  MaxButton,
+  CancelButton,
+  BackButton,
+  PillButton,
+} from '../component/button';
 import Card from '../component/card';
 import LightningBoltIcon from '../asset/icon/lightning-bolt';
-import { FormStretcher } from '../component/form';
-import {
-  BalanceLabel,
-  BalanceLabelNumeral,
-  BalanceLabelUnit,
-} from '../component/label';
+import { FormStretcher, FormText } from '../component/form';
+import { BalanceLabel, BalanceLabelUnit } from '../component/label';
 import { color } from '../component/style';
 
 const styles = StyleSheet.create({
-  balance: {
-    marginBottom: 10,
-  },
-  numeral: {
-    color: color.blackText,
+  description: {
+    paddingLeft: 20,
+    paddingRight: 20,
   },
   unit: {
     color: color.blackText,
   },
-  totalLbl: {
-    marginTop: 5,
-  },
-  note: {
-    marginTop: 5,
-    borderBottomWidth: 0,
+  maxBtn: {
+    marginTop: 10,
+    marginBottom: 20,
   },
-  confirmBtn: {
+  nextBtn: {
     marginTop: 20,
+    backgroundColor: color.purple,
   },
 });
 
 const PayLightningSupplyAmountView = ({ store, nav, payment }) => (
-  <Background image="purple-gradient-bg">
-    <Header shadow color={color.purple}>
-      <BackButton onPress={() => nav.goPay()} />
-      <Title title="Supply Lightning Amount">
+  <Background color={color.purple}>
+    <Header color={color.purple}>
+      <BackButton onPress={() => nav.goHome()} />
+      <Title title="Specify Amount to Send">
         <LightningBoltIcon height={12} width={6.1} />
       </Title>
       <CancelButton onPress={() => nav.goHome()} />
     </Header>
     <MainContent>
       <Card>
+        <FormText style={styles.description}>
+          The invoice did not specify an amount.
+        </FormText>
         <FormStretcher>
           <BalanceLabel style={styles.balance}>
-            <BalanceLabelNumeral style={styles.numeral}>
-              {store.paymentAmountLabel}
-            </BalanceLabelNumeral>
+            <AmountInputField
+              autoFocus={true}
+              value={store.payment.amount}
+              onChangeText={amount => payment.setAmount({ amount })}
+              onSubmitEditing={() =>
+                payment.estimateLightningFeeForAmount(payment.amount)
+              }
+            />
             <BalanceLabelUnit style={styles.unit}>
-              {store.unitLabel}
+              {store.unitFiatLabel}
             </BalanceLabelUnit>
           </BalanceLabel>
-          <NamedField name="Fee">
-            {store.paymentFeeLabel} {store.unitLabel}
-          </NamedField>
-          <NamedField name="Total" style={styles.totalLbl}>
-            {store.paymentTotalLabel} {store.unitLabel}
-          </NamedField>
+          <MaxButton
+            style={styles.maxBtn}
+            active={store.payment.sendAll}
+            onPress={() => payment.toggleMax()}
+          />
           {store.payment.note ? (
             <NamedField name="Note" style={styles.note}>
               {store.payment.note}
             </NamedField>
           ) : null}
         </FormStretcher>
         <PillButton
-          style={styles.confirmBtn}
-          onPress={() => payment.payLightning()}
+          style={styles.nextBtn}
+          onPress={() => nav.goPayLightningConfirm()}
         >
-          Confirm
+          Pay
         </PillButton>
       </Card>
     </MainContent>

test/unit/action/payment.spec.js

@@ -469,15 +469,33 @@ describe('Action Payments Unit Tests', () => {
       });
     });
 
-    it('should send lightning payment', async () => {
+    it('should send lightning payment with amount 0 if not specified.', async () => {
       paymentsOnStub.withArgs('data').yields({ paymentError: '' });
       payment.setAddress({ address: 'lightning:some-invoice' });
       await payment.payLightning();
       expect(grpc.sendStreamCommand, 'was called with', 'sendPayment');
       expect(
         paymentsWriteStub,
         'was called with',
-        JSON.stringify({ paymentRequest: 'some-invoice' }),
+        JSON.stringify({ paymentRequest: 'some-invoice', amt: 0 }),
+        'utf8'
+      );
+      expect(nav.goWait, 'was called once');
+      expect(nav.goPayLightningDone, 'was called once');
+      expect(notification.display, 'was not called');
+    });
+
+    it('should send lightning payment with amount.', async () => {
+      paymentsOnStub.withArgs('data').yields({ paymentError: '' });
+      payment.setAddress({ address: 'lightning:some-invoice' });
+      store.settings.unit = 'btc';
+      payment.setAmount({ amount: '0.0001' });
+      await payment.payLightning();
+      expect(grpc.sendStreamCommand, 'was called with', 'sendPayment');
+      expect(
+        paymentsWriteStub,
+        'was called with',
+        JSON.stringify({ paymentRequest: 'some-invoice', amt: 10000 }),
         'utf8'
       );
       expect(nav.goWait, 'was called once');