Merge pull request #1035 from lightninglabs/payscreen-max-toggle

Payscreen max toggle

Author: tanx

src/action/payment.js

@@ -103,6 +103,7 @@ class PaymentAction {
     this._store.payment.fee = '';
     this._store.payment.note = '';
     this._store.payment.useScanner = false;
+    this._store.payment.sendAll = false;
     this._nav.goPay();
   }
 
@@ -122,6 +123,25 @@ class PaymentAction {
    */
   setAmount({ amount }) {
     this._store.payment.amount = amount;
+    this._store.payment.sendAll = false;
+  }
+
+  /**
+   * Set the payment amount to the max amount that can be sent. This
+   * is useful for people to move their coins off of the app.
+   * @return {Promise<undefined>}
+   */
+  async toggleMax() {
+    const { payment, balanceSatoshis, settings } = this._store;
+    if (payment.sendAll) {
+      return this.setAmount({ amount: '0' });
+    }
+    let amtSat = Math.floor(0.8 * balanceSatoshis);
+    payment.amount = toAmount(amtSat, settings);
+    await this.estimateFee();
+    amtSat = balanceSatoshis - toSatoshis(payment.fee, settings);
+    payment.amount = toAmount(amtSat, settings);
+    payment.sendAll = true;
   }
 
   /**
@@ -214,7 +234,10 @@ class PaymentAction {
    */
   async initPayBitcoinConfirm() {
     try {
-      await this.estimateFee();
+      const { payment } = this._store;
+      if (!payment.fee || !payment.sendAll) {
+        await this.estimateFee();
+      }
       this._nav.goPayBitcoinConfirm();
     } catch (err) {
       this._notification.display({ msg: 'Fee estimation failed!', err });
@@ -238,11 +261,7 @@ class PaymentAction {
     }, PAYMENT_TIMEOUT);
     this._nav.goWait();
     try {
-      const { payment, settings } = this._store;
-      await this._grpc.sendCommand('sendCoins', {
-        addr: payment.address,
-        amount: toSatoshis(payment.amount, settings),
-      });
+      await this._sendPayment();
       this._nav.goPayBitcoinDone();
     } catch (err) {
       this._nav.goPayBitcoinConfirm();
@@ -252,6 +271,16 @@ class PaymentAction {
     }
   }
 
+  async _sendPayment() {
+    const { payment, settings } = this._store;
+    let amount = payment.sendAll ? 0 : toSatoshis(payment.amount, settings);
+    await this._grpc.sendCommand('sendCoins', {
+      addr: payment.address,
+      amount,
+      sendAll: payment.sendAll,
+    });
+  }
+
   /**
    * Send the amount specified in the invoice as a lightning transaction and
    * display the wait screen while the payment confirms.

src/component/button.js

@@ -523,4 +523,39 @@ RadioButton.propTypes = {
   selected: PropTypes.bool.isRequired,
 };
 
+//
+// Max Button
+//
+
+const maxStyles = StyleSheet.create({
+  touchable: {
+    borderStyle: 'solid',
+    borderWidth: 1,
+    minHeight: 0,
+    minWidth: 0,
+    height: 30,
+    width: 50,
+  },
+});
+
+export const MaxButton = ({ active, style, ...props }) => (
+  <Button
+    style={[
+      { borderColor: active ? color.blackText : color.greyPlaceholder },
+      maxStyles.touchable,
+      style,
+    ]}
+    {...props}
+  >
+    <Text style={{ color: active ? color.blackText : color.greyPlaceholder }}>
+      Max
+    </Text>
+  </Button>
+);
+
+MaxButton.propTypes = {
+  active: PropTypes.bool.isRequired,
+  style: ViewPropTypes.style,
+};
+
 export default Button;

src/store.js

@@ -68,6 +68,7 @@ export class Store {
         amount: '',
         fee: '',
         note: '',
+        sendAll: false,
         useScanner: false,
       },
       peers: [],

src/view/pay-bitcoin.js

@@ -6,7 +6,12 @@ import Background from '../component/background';
 import MainContent from '../component/main-content';
 import { InputField, 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 BitcoinIcon from '../asset/icon/bitcoin';
 import { FormStretcher, FormText } from '../component/form';
@@ -18,12 +23,13 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
     paddingRight: 20,
   },
-  balance: {
-    marginBottom: 10,
-  },
   unit: {
     color: color.blackText,
   },
+  maxBtn: {
+    marginTop: 10,
+    marginBottom: 20,
+  },
   nextBtn: {
     marginTop: 20,
     backgroundColor: color.orange,
@@ -57,6 +63,11 @@ const PayBitcoinView = ({ store, nav, payment }) => (
               {store.unitFiatLabel}
             </BalanceLabelUnit>
           </BalanceLabel>
+          <MaxButton
+            style={styles.maxBtn}
+            active={store.payment.sendAll}
+            onPress={() => payment.toggleMax()}
+          />
           <InputField
             placeholder="Bitcoin Address"
             value={store.payment.address}

stories/component/button-story.js

@@ -18,6 +18,7 @@ import {
   AddButton,
   QrButton,
   DownButton,
+  MaxButton,
 } from '../../src/component/button';
 import CancelIcon from '../../src/asset/icon/cancel';
 import CopyPurpleIcon from '../../src/asset/icon/copy-purple';
@@ -39,6 +40,12 @@ storiesOf('Button', module)
       style={{ backgroundColor: color.purple }}
       onPress={action('clicked')}
     />
+  ))
+  .add('Max Button (active)', () => (
+    <MaxButton active={true} onPress={action('clicked')} />
+  ))
+  .add('Max Button (inactive)', () => (
+    <MaxButton active={false} onPress={action('clicked')} />
   ));
 
 storiesOf('Button', module)

stories/screen-story.js

@@ -107,6 +107,7 @@ sinon.stub(invoice, 'generateUri');
 const payment = new PaymentAction(store, grpc, nav, notify);
 sinon.stub(payment, 'checkType');
 sinon.stub(payment, 'payBitcoin');
+sinon.stub(payment, 'toggleMax');
 sinon.stub(payment, 'payLightning');
 sinon.stub(payment, 'initPayBitcoinConfirm');
 const channel = new ChannelAction(store, grpc, nav, notify);

test/unit/action/payment.spec.js

@@ -160,32 +160,69 @@ describe('Action Payments Unit Tests', () => {
       store.payment.address = 'foo';
       store.payment.amount = 'bar';
       store.payment.note = 'baz';
+      store.payment.fee = 'blub';
+      store.payment.useScanner = true;
+      store.payment.sendAll = true;
       payment.init();
       expect(store.payment.address, 'to equal', '');
       expect(store.payment.amount, 'to equal', '');
       expect(store.payment.note, 'to equal', '');
+      expect(store.payment.fee, 'to equal', '');
+      expect(store.payment.useScanner, 'to equal', false);
+      expect(store.payment.sendAll, 'to equal', false);
       expect(nav.goPay, 'was called once');
     });
   });
 
   describe('initPayBitcoinConfirm()', () => {
-    it('should get estimate and navigate to confirm view', async () => {
+    beforeEach(() => {
       store.payment.address = 'foo';
       store.payment.amount = '2000';
       grpc.sendCommand.withArgs('estimateFee').resolves({
         feeSat: 10000,
       });
+    });
+
+    it('should get estimate and navigate to confirm view', async () => {
+      await payment.initPayBitcoinConfirm();
+      expect(grpc.sendCommand, 'was called once');
+      expect(nav.goPayBitcoinConfirm, 'was called once');
+      expect(notification.display, 'was not called');
+      expect(store.payment.fee, 'to be', '0.0001');
+    });
+
+    it('should not get estimate and navigate if fee and sendAll are set', async () => {
+      store.payment.fee = '0.0002';
+      store.payment.sendAll = true;
       await payment.initPayBitcoinConfirm();
+      expect(grpc.sendCommand, 'was not called');
+      expect(nav.goPayBitcoinConfirm, 'was called once');
+      expect(notification.display, 'was not called');
+      expect(store.payment.fee, 'to be', '0.0002');
+    });
+
+    it('should get estimate and navigate if fee is set', async () => {
+      store.payment.fee = '0.0002';
+      await payment.initPayBitcoinConfirm();
+      expect(grpc.sendCommand, 'was called once');
+      expect(nav.goPayBitcoinConfirm, 'was called once');
+      expect(notification.display, 'was not called');
+      expect(store.payment.fee, 'to be', '0.0001');
+    });
+
+    it('should get estimate and navigate if sendAll is set', async () => {
+      store.payment.sendAll = true;
+      await payment.initPayBitcoinConfirm();
+      expect(grpc.sendCommand, 'was called once');
       expect(nav.goPayBitcoinConfirm, 'was called once');
       expect(notification.display, 'was not called');
       expect(store.payment.fee, 'to be', '0.0001');
     });
 
     it('should display notification on error', async () => {
-      store.payment.address = 'foo';
-      store.payment.amount = '2000';
       grpc.sendCommand.withArgs('estimateFee').rejects();
       await payment.initPayBitcoinConfirm();
+      expect(grpc.sendCommand, 'was called once');
       expect(nav.goPayBitcoinConfirm, 'was not called');
       expect(notification.display, 'was called once');
       expect(store.payment.fee, 'to be', '');
@@ -209,6 +246,13 @@ describe('Action Payments Unit Tests', () => {
       payment.setAmount({ amount: 'some-amount' });
       expect(store.payment.amount, 'to equal', 'some-amount');
     });
+
+    it('should reset sendAll if set', () => {
+      store.payment.sendAll = true;
+      payment.setAmount({ amount: 'some-amount' });
+      expect(store.payment.amount, 'to equal', 'some-amount');
+      expect(store.payment.sendAll, 'to be false');
+    });
   });
 
   describe('checkType()', () => {
@@ -295,6 +339,27 @@ describe('Action Payments Unit Tests', () => {
     });
   });
 
+  describe('toggleMax()', () => {
+    it('should set the payment amount to the wallet balance minus fee', async () => {
+      store.payment.address = 'some-address';
+      store.balanceSatoshis = 100000;
+      grpc.sendCommand.resolves({ feeSat: 100 });
+      await payment.toggleMax();
+      expect(store.payment.amount, 'to match', /^0[,.]0{3}9{3}$/);
+      expect(store.payment.sendAll, 'to be true');
+    });
+
+    it('should disable sendAll and reset amount', async () => {
+      store.payment.sendAll = true;
+      store.payment.amount = 1000;
+      store.payment.address = 'some-address';
+      store.balanceSatoshis = 100000;
+      await payment.toggleMax();
+      expect(store.payment.amount, 'to be', '0');
+      expect(store.payment.sendAll, 'to be false');
+    });
+  });
+
   describe('payBitcoin()', () => {
     it('should send on-chain transaction', async () => {
       store.payment.amount = '0.00001';
@@ -305,6 +370,23 @@ describe('Action Payments Unit Tests', () => {
       expect(grpc.sendCommand, 'was called with', 'sendCoins', {
         addr: 'some-address',
         amount: 1000,
+        sendAll: false,
+      });
+      expect(nav.goPayBitcoinDone, 'was called once');
+      expect(notification.display, 'was not called');
+    });
+
+    it('should set amount to 0 on sendAll', async () => {
+      store.payment.sendAll = true;
+      store.payment.amount = '0.00001';
+      store.payment.address = 'some-address';
+      grpc.sendCommand.withArgs('sendCoins').resolves();
+      await payment.payBitcoin();
+      expect(nav.goWait, 'was called once');
+      expect(grpc.sendCommand, 'was called with', 'sendCoins', {
+        addr: 'some-address',
+        amount: 0,
+        sendAll: true,
       });
       expect(nav.goPayBitcoinDone, 'was called once');
       expect(notification.display, 'was not called');