Redirect navigation flow for 0 value invocies.

Detecting a zero amount invoice in checkType we redirect to a seperate view.
Currently only title is changed in the view.

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "checkJs": true,
+    "jsx": "react",
+    "lib": [ "dom", "es2017" ]
+  }
+}

src/action/nav-mobile.js

@@ -119,6 +119,10 @@ class NavAction {
     this._navigate('Pay');
   }
 
+  goPayLightningSupplyAmount() {
+    this._navigate('PayLightningSupplyAmount');
+  }
+
   goPayLightningConfirm() {
     this._navigate('PayLightningConfirm');
   }

src/action/nav.js

@@ -81,6 +81,10 @@ class NavAction {
     this._store.route = 'Pay';
   }
 
+  goPayLightningSupplyAmount() {
+    this._store.route = 'PayLightningSupplyAmount';
+  }
+
   goPayLightningConfirm() {
     this._store.route = 'PayLightningConfirm';
   }

src/action/payment.js

@@ -165,7 +165,14 @@ class PaymentAction {
       return this._notification.display({ msg: 'Enter an invoice or address' });
     }
     if (await this.decodeInvoice({ invoice: this._store.payment.address })) {
-      this._nav.goPayLightningConfirm();
+      if (
+        this._store.payment.amount === '0' ||
+        this._store.payment.amount === 0
+      ) {
+        this._nav.goPayLightningSupplyAmount();
+      } else {
+        this._nav.goPayLightningConfirm();
+      }
     } else if (isAddress(this._store.payment.address)) {
       this._nav.goPayBitcoin();
     } else {

src/view/main-mobile.js

@@ -33,6 +33,7 @@ import SettingUnitView from './setting-unit';
 import SettingFiatView from './setting-fiat';
 import CLIView from './cli';
 import PaymentView from './payment-mobile';
+import PayLightningSupplyAmountView from './pay-lightning-supply-amount-mobile';
 import PayLightningConfirmView from './pay-lightning-confirm-mobile';
 import PayLightningDoneView from './pay-lightning-done-mobile';
 import PaymentFailedView from './payment-failed-mobile';
@@ -171,6 +172,10 @@ const InvoiceQR = () => (
 
 const Pay = () => <PaymentView store={store} payment={payment} nav={nav} />;
 
+const PayLightningSupplyAmount = () => (
+  <PayLightningSupplyAmountView store={store} payment={payment} nav={nav} />
+);
+
 const PayLightningConfirm = () => (
   <PayLightningConfirmView store={store} payment={payment} nav={nav} />
 );
@@ -236,6 +241,7 @@ const InvoiceStack = createStackNavigator(
 const PayStack = createStackNavigator(
   {
     Pay,
+    PayLightningSupplyAmount,
     PayLightningConfirm,
     Wait,
     PayLightningDone,

src/view/main.js

@@ -21,6 +21,7 @@ import LoaderSyncing from './loader-syncing';
 import Wait from './wait';
 import Home from './home';
 import Payment from './payment';
+import PayLightningSupplyAmount from './pay-lightning-supply-amount';
 import PayLightningConfirm from './pay-lightning-confirm';
 import PayLightningDone from './pay-lightning-done';
 import PaymentFailed from './payment-failed';
@@ -130,6 +131,9 @@ class MainView extends Component {
         {route === 'Pay' && (
           <Payment store={store} payment={payment} nav={nav} />
         )}
+        {route === 'PayLightningSupplyAmount' && (
+          <PayLightningSupplyAmount store={store} payment={payment} nav={nav} />
+        )}
         {route === 'PayLightningConfirm' && (
           <PayLightningConfirm store={store} payment={payment} nav={nav} />
         )}

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+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 { Header, Title } from '../component/header';
+import { CancelButton, BackButton, SmallGlasButton } 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 { color } from '../component/style';
+
+const styles = StyleSheet.create({
+  balance: {
+    marginBottom: 10,
+  },
+  numeral: {
+    color: color.blackText,
+  },
+  unit: {
+    color: color.blackText,
+  },
+  totalLbl: {
+    marginTop: 5,
+  },
+  note: {
+    marginTop: 5,
+    borderBottomWidth: 0,
+  },
+  confirmBtn: {
+    marginTop: 20,
+  },
+});
+
+const PayLightningSupplyAmountView = ({ store, nav, payment }) => (
+  <Background color={color.purple}>
+    <Header color={color.purple}>
+      <BackButton onPress={() => nav.goPay()} />
+      <Title title="Supply Lightning Payment Amount">
+        <LightningBoltIcon height={12} width={6.1} />
+      </Title>
+      <CancelButton onPress={() => nav.goHome()} />
+    </Header>
+    <MainContent>
+      <Card>
+        <FormStretcher>
+          <BalanceLabel style={styles.balance}>
+            <BalanceLabelNumeral style={styles.numeral}>
+              {store.paymentAmountLabel}
+            </BalanceLabelNumeral>
+            <BalanceLabelUnit style={styles.unit}>
+              {store.unitLabel}
+            </BalanceLabelUnit>
+          </BalanceLabel>
+          <NamedField name="Fee">
+            {store.paymentFeeLabel} {store.unitLabel}
+          </NamedField>
+          <NamedField name="Total" style={styles.totalLbl}>
+            {store.paymentTotalLabel} {store.unitLabel}
+          </NamedField>
+          {store.payment.note ? (
+            <NamedField name="Note" style={styles.note}>
+              {store.payment.note}
+            </NamedField>
+          ) : null}
+        </FormStretcher>
+      </Card>
+    </MainContent>
+    <SmallGlasButton onPress={() => payment.payLightning()}>
+      Confirm
+    </SmallGlasButton>
+  </Background>
+);
+
+PayLightningSupplyAmountView.propTypes = {
+  store: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
+  payment: PropTypes.object.isRequired,
+};
+
+export default observer(PayLightningSupplyAmountView);

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+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 { Header, Title } from '../component/header';
+import { 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 { color } from '../component/style';
+
+const styles = StyleSheet.create({
+  balance: {
+    marginBottom: 10,
+  },
+  numeral: {
+    color: color.blackText,
+  },
+  unit: {
+    color: color.blackText,
+  },
+  totalLbl: {
+    marginTop: 5,
+  },
+  note: {
+    marginTop: 5,
+    borderBottomWidth: 0,
+  },
+  confirmBtn: {
+    marginTop: 20,
+  },
+});
+
+const PayLightningSupplyAmountView = ({ store, nav, payment }) => (
+  <Background image="purple-gradient-bg">
+    <Header shadow color={color.purple}>
+      <BackButton onPress={() => nav.goPay()} />
+      <Title title="Supply Lightning Amount">
+        <LightningBoltIcon height={12} width={6.1} />
+      </Title>
+      <CancelButton onPress={() => nav.goHome()} />
+    </Header>
+    <MainContent>
+      <Card>
+        <FormStretcher>
+          <BalanceLabel style={styles.balance}>
+            <BalanceLabelNumeral style={styles.numeral}>
+              {store.paymentAmountLabel}
+            </BalanceLabelNumeral>
+            <BalanceLabelUnit style={styles.unit}>
+              {store.unitLabel}
+            </BalanceLabelUnit>
+          </BalanceLabel>
+          <NamedField name="Fee">
+            {store.paymentFeeLabel} {store.unitLabel}
+          </NamedField>
+          <NamedField name="Total" style={styles.totalLbl}>
+            {store.paymentTotalLabel} {store.unitLabel}
+          </NamedField>
+          {store.payment.note ? (
+            <NamedField name="Note" style={styles.note}>
+              {store.payment.note}
+            </NamedField>
+          ) : null}
+        </FormStretcher>
+        <PillButton
+          style={styles.confirmBtn}
+          onPress={() => payment.payLightning()}
+        >
+          Confirm
+        </PillButton>
+      </Card>
+    </MainContent>
+  </Background>
+);
+
+PayLightningSupplyAmountView.propTypes = {
+  store: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
+  payment: PropTypes.object.isRequired,
+};
+
+export default observer(PayLightningSupplyAmountView);