Merge pull request #464 from lightninglabs/fiat-confirm

Fiat confirm

Author: tanx

src/computed/invoice.js

@@ -1,9 +1,11 @@
 import { computed, extendObservable } from 'mobx';
-import { formatNumber } from '../helper';
+import { toLabel } from '../helper';
 
 const ComputedInvoice = store => {
   extendObservable(store, {
-    invoiceAmountLabel: computed(() => formatNumber(store.invoice.amount)),
+    invoiceAmountLabel: computed(() =>
+      toLabel(store.invoice.amount, store.settings)
+    ),
   });
 };
 

src/computed/payment.js

@@ -1,13 +1,17 @@
 import { computed, extendObservable } from 'mobx';
-import { formatNumber } from '../helper';
+import { toSatoshis, toAmountLabel, toLabel } from '../helper';
 
 const ComputedPayment = store => {
   extendObservable(store, {
-    paymentAmountLabel: computed(() => formatNumber(store.payment.amount)),
-    paymentFeeLabel: computed(() => formatNumber(store.payment.fee)),
+    paymentAmountLabel: computed(() =>
+      toLabel(store.payment.amount, store.settings)
+    ),
+    paymentFeeLabel: computed(() => toLabel(store.payment.fee, store.settings)),
     paymentTotalLabel: computed(() => {
-      const { payment } = store;
-      return formatNumber(Number(payment.amount) + Number(payment.fee));
+      const { payment, settings } = store;
+      const satAmount = toSatoshis(payment.amount, settings.unit);
+      const satFee = toSatoshis(payment.fee, settings.unit);
+      return toAmountLabel(satAmount + satFee, settings);
     }),
   });
 };

src/helper.js

@@ -126,6 +126,21 @@ export const toAmountLabel = (satoshis, settings) => {
     : formatNumber(toAmount(satoshis, settings.unit));
 };
 
+/**
+ * Convert a string formatted BTC amount either to fiat or the selected BTC unit.
+ * The output should be used throughout the UI for value labels.
+ * @param  {string} amount The amount e.g. '0.0001'
+ * @param  {Object} settings Contains the current exchange rate
+ * @return {string}          The corresponding value label
+ */
+export const toLabel = (amount, settings) => {
+  if (!settings) {
+    throw new Error('Missing args!');
+  }
+  const satoshis = toSatoshis(amount, settings.unit);
+  return toAmountLabel(satoshis, settings);
+};
+
 /**
  * Split '-' separated words and convert to uppercase
  * @param  {string} value     The input string

src/view/invoice-qr.js

@@ -66,7 +66,9 @@ const InvoiceQRView = ({ store, nav, invoice }) => (
           <BalanceLabelNumeral style={styles.numeral}>
             {store.invoiceAmountLabel}
           </BalanceLabelNumeral>
-          <BalanceLabelUnit style={styles.unit}>{store.unit}</BalanceLabelUnit>
+          <BalanceLabelUnit style={styles.unit}>
+            {store.unitLabel}
+          </BalanceLabelUnit>
         </BalanceLabel>
         <NamedField name="Note">{store.invoice.note}</NamedField>
         <QRCode style={styles.qrcode}>{store.invoice.uri}</QRCode>

src/view/pay-bitcoin-confirm.js

@@ -64,14 +64,14 @@ const PayBitcoinConfirmView = ({ store, nav, payment }) => (
               {store.paymentAmountLabel}
             </BalanceLabelNumeral>
             <BalanceLabelUnit style={styles.unit}>
-              {store.unit}
+              {store.unitLabel}
             </BalanceLabelUnit>
           </BalanceLabel>
           <NamedField name="Fee">
-            {store.paymentFeeLabel} {store.unit}
+            {store.paymentFeeLabel} {store.unitLabel}
           </NamedField>
           <NamedField name="Total" style={styles.totalLbl}>
-            {store.paymentTotalLabel} {store.unit}
+            {store.paymentTotalLabel} {store.unitLabel}
           </NamedField>
         </FormStretcher>
         <PillButton

src/view/pay-lightning-confirm.js

@@ -59,14 +59,14 @@ const PayLightningConfirmView = ({ store, nav, payment }) => (
               {store.paymentAmountLabel}
             </BalanceLabelNumeral>
             <BalanceLabelUnit style={styles.unit}>
-              {store.unit}
+              {store.unitLabel}
             </BalanceLabelUnit>
           </BalanceLabel>
           <NamedField name="Fee">
-            {store.paymentFeeLabel} {store.unit}
+            {store.paymentFeeLabel} {store.unitLabel}
           </NamedField>
           <NamedField name="Total" style={styles.totalLbl}>
-            {store.paymentTotalLabel} {store.unit}
+            {store.paymentTotalLabel} {store.unitLabel}
           </NamedField>
         </FormStretcher>
         <PillButton

test/unit/computed/invoice.spec.js

@@ -14,10 +14,18 @@ describe('Computed Invoice Unit Tests', () => {
       expect(store.invoiceAmountLabel, 'to equal', '0');
     });
 
-    it('should format amount', () => {
+    it('should format btc amount', () => {
       store.invoice.amount = '0.1001';
       ComputedInvoice(store);
       expect(store.invoiceAmountLabel, 'to match', /^0[,.]1{1}0{2}1{1}$/);
     });
+
+    it('should format fiat amount', () => {
+      store.settings.displayFiat = true;
+      store.settings.exchangeRate.usd = 0.00014503;
+      store.invoice.amount = '0.1001';
+      ComputedInvoice(store);
+      expect(store.invoiceAmountLabel, 'to match', /690[,.]20/);
+    });
   });
 });

test/unit/computed/payment.spec.js

@@ -16,7 +16,7 @@ describe('Computed Payment Unit Tests', () => {
       expect(store.paymentTotalLabel, 'to equal', '0');
     });
 
-    it('should calculate total', () => {
+    it('should calculate btc total', () => {
       store.payment.fee = '0.0001';
       store.payment.amount = '0.1';
       ComputedPayment(store);
@@ -25,6 +25,17 @@ describe('Computed Payment Unit Tests', () => {
       expect(store.paymentTotalLabel, 'to match', /^0[,.]1{1}0{2}1{1}$/);
     });
 
+    it('should calculate fiat total', () => {
+      store.settings.displayFiat = true;
+      store.settings.exchangeRate.usd = 0.00014503;
+      store.payment.fee = '0.0001';
+      store.payment.amount = '0.1';
+      ComputedPayment(store);
+      expect(store.paymentAmountLabel, 'to match', /689[,.]51/);
+      expect(store.paymentFeeLabel, 'to match', /0[,.]69/);
+      expect(store.paymentTotalLabel, 'to match', /690[,.]20/);
+    });
+
     it('should ignore fee if blank', () => {
       store.payment.fee = '';
       store.payment.amount = '0.1';

test/unit/helper.spec.js

@@ -450,6 +450,66 @@ describe('Helpers Unit Tests', () => {
     });
   });
 
+  describe('toLabel()', () => {
+    let settings;
+
+    beforeEach(() => {
+      settings = {
+        unit: 'btc',
+        fiat: 'usd',
+        exchangeRate: { usd: 0.00014503 },
+        displayFiat: true,
+      };
+    });
+
+    it('should throw error if amount is undefined', () => {
+      expect(
+        helpers.toLabel.bind(null, undefined, settings),
+        'to throw',
+        /Missing/
+      );
+    });
+
+    it('should throw error if amount is null', () => {
+      expect(helpers.toLabel.bind(null, null, settings), 'to throw', /Missing/);
+    });
+
+    it('should throw error if amount is number', () => {
+      expect(helpers.toLabel.bind(null, 0.1, settings), 'to throw', /Missing/);
+    });
+
+    it('should throw error if amount is separated with a comma', () => {
+      expect(
+        helpers.toLabel.bind(null, '0,1', settings),
+        'to throw',
+        /Missing/
+      );
+    });
+
+    it('should throw error if unit is undefined', () => {
+      expect(
+        helpers.toLabel.bind(null, '100', undefined),
+        'to throw',
+        /Missing/
+      );
+    });
+
+    it('should be 0 for empty amount', () => {
+      const num = helpers.toLabel('', settings);
+      expect(num, 'to match', /0{1}[,.]0{2}/);
+    });
+
+    it('should work for string input', () => {
+      const num = helpers.toLabel('0.10', settings);
+      expect(num, 'to match', /689[,.]51/);
+    });
+    it('should format a number value', () => {
+      settings.displayFiat = false;
+      const lbl = helpers.toLabel('0.10', settings);
+      expect(lbl, 'to match', /0[,.]1/);
+    });
+  });
+
   describe('toCaps()', () => {
     it('should work for undefined', () => {
       const caps = helpers.toCaps(undefined);