FIX: UI fixes for transactions list

ADD: Haptic feedbacks on error alerts

screen/lnd/scanLndInvoice.js

@@ -15,6 +15,7 @@ import {
 import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet';
 import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
 import { Icon } from 'react-native-elements';
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let EV = require('../../events');
@@ -37,6 +38,7 @@ export default class ScanLndInvoice extends React.Component {
     super(props);
 
     if (!BlueApp.getWallets().some(item => item.type === LightningCustodianWallet.type)) {
+      ReactNativeHapticFeedback.trigger('notificationError', false);
       alert('Before paying a Lightning invoice, you must first add a Lightning wallet.');
       props.navigation.dismiss();
     } else {
@@ -91,6 +93,7 @@ export default class ScanLndInvoice extends React.Component {
   processInvoice = data => {
     this.setState({ isLoading: true }, async () => {
       if (!this.state.fromWallet) {
+        ReactNativeHapticFeedback.trigger('notificationError', false);
         alert('Before paying a Lightning invoice, you must first add a Lightning wallet.');
         return this.props.navigation.goBack();
       }
@@ -130,6 +133,7 @@ export default class ScanLndInvoice extends React.Component {
       } catch (Err) {
         Keyboard.dismiss();
         this.setState({ isLoading: false });
+        ReactNativeHapticFeedback.trigger('notificationError', false);
         alert(Err.message);
       }
     });
@@ -153,12 +157,14 @@ export default class ScanLndInvoice extends React.Component {
         let expiresIn = (decoded.timestamp * 1 + decoded.expiry * 1) * 1000; // ms
         if (+new Date() > expiresIn) {
           this.setState({ isLoading: false });
+          ReactNativeHapticFeedback.trigger('notificationError', false);
           return alert('Invoice expired');
         }
 
         const currentUserInvoices = fromWallet.user_invoices_raw; // not fetching invoices, as we assume they were loaded previously
         if (currentUserInvoices.some(invoice => invoice.payment_hash === decoded.payment_hash)) {
           this.setState({ isLoading: false });
+          ReactNativeHapticFeedback.trigger('notificationError', false);
           return alert(loc.lnd.sameWalletAsInvoiceError);
         }
 
@@ -167,6 +173,7 @@ export default class ScanLndInvoice extends React.Component {
         } catch (Err) {
           console.log(Err.message);
           this.setState({ isLoading: false });
+          ReactNativeHapticFeedback.trigger('notificationError', false);
           return alert(Err.message);
         }
 

screen/wallets/export.js

@@ -40,13 +40,7 @@ export default class WalletExport extends Component {
     Privacy.enableBlur();
     this.setState({
       isLoading: false,
-      showQr: false,
     });
-
-    let that = this;
-    setTimeout(function() {
-      that.setState({ showQr: true });
-    }, 1000);
   }
 
   componentWillUnmount() {
@@ -84,27 +78,17 @@ export default class WalletExport extends Component {
             }
           })()}
           <BlueSpacing20 />
-          {(() => {
-            if (this.state.showQr) {
-              return (
-                <QRCode
-                  value={this.state.wallet.getSecret()}
-                  logo={require('../../img/qr-code.png')}
-                  size={this.state.qrCodeHeight}
-                  logoSize={90}
-                  color={BlueApp.settings.foregroundColor}
-                  logoBackgroundColor={BlueApp.settings.brandingColor}
-                  ecl={'H'}
-                />
-              );
-            } else {
-              return (
-                <View>
-                  <ActivityIndicator />
-                </View>
-              );
-            }
-          })()}
+
+          <QRCode
+            value={this.state.wallet.getSecret()}
+            logo={require('../../img/qr-code.png')}
+            size={this.state.qrCodeHeight}
+            logoSize={90}
+            color={BlueApp.settings.foregroundColor}
+            logoBackgroundColor={BlueApp.settings.brandingColor}
+            ecl={'H'}
+          />
+
           <BlueSpacing20 />
 
           <BlueText style={{ alignItems: 'center', paddingHorizontal: 8 }}>{this.state.wallet.getSecret()}</BlueText>

screen/wallets/transactions.js

@@ -1,3 +1,4 @@
+/* global alert */
 import React, { Component } from 'react';
 import {
   Text,
@@ -32,6 +33,7 @@ export default class WalletTransactions extends Component {
     return {
       headerRight: (
         <TouchableOpacity
+          disabled={navigation.getParam('isLoading') === true}
           style={{ marginHorizontal: 16, minWidth: 150, justifyContent: 'center', alignItems: 'flex-end' }}
           onPress={() =>
             navigation.navigate('WalletDetails', {
@@ -60,7 +62,7 @@ export default class WalletTransactions extends Component {
     // here, when we receive REMOTE_TRANSACTIONS_COUNT_CHANGED we fetch TXs and balance for current wallet
     EV(EV.enum.REMOTE_TRANSACTIONS_COUNT_CHANGED, this.refreshTransactionsFunction.bind(this));
     const wallet = props.navigation.getParam('wallet');
-    this.props.navigation.setParams({ wallet: wallet });
+    this.props.navigation.setParams({ wallet: wallet, isLoading: true });
     this.state = {
       isLoading: true,
       showShowFlatListRefreshControl: false,
@@ -74,6 +76,7 @@ export default class WalletTransactions extends Component {
 
   componentDidMount() {
     // nop
+    this.props.navigation.setParams({ isLoading: false });
   }
 
   /**
@@ -162,7 +165,7 @@ export default class WalletTransactions extends Component {
           console.log(wallet.getLabel(), 'fetch tx took', (end - start) / 1000, 'sec');
         } catch (err) {
           noErr = false;
-          console.warn(err);
+          alert(err.message);
           this.setState({
             isLoading: false,
             showShowFlatListRefreshControl: false,
@@ -309,8 +312,8 @@ export default class WalletTransactions extends Component {
         <Text
           style={{
             flex: 1,
-            paddingLeft: 15,
-            paddingTop: 15,
+            marginLeft: 15,
+            marginTop: 10,
             fontWeight: 'bold',
             fontSize: 24,
             color: BlueApp.settings.foregroundColor,
@@ -345,6 +348,7 @@ export default class WalletTransactions extends Component {
             this.redrawScreen();
           }}
           onWillBlur={() => this.onWillBlur()}
+          onDidFocus={() => this.props.navigation.setParams({ isLoading: false })}
         />
         {this.renderWalletHeader()}
 
@@ -358,19 +362,17 @@ export default class WalletTransactions extends Component {
             >
               <View
                 style={{
-                  marginVertical: 16,
+                  margin: 16,
                   backgroundColor: '#f2f2f2',
                   borderRadius: 9,
                   minWidth: 343,
                   minHeight: 49,
-                  width: 343,
-                  height: 49,
                   justifyContent: 'center',
                   alignItems: 'center',
                   alignSelf: 'center',
                 }}
               >
-                <Text>marketplace</Text>
+                <Text style={{ color: '#062453', fontSize: 18 }}>marketplace</Text>
               </View>
             </TouchableOpacity>
           )}