ADD: Refill with external wallet

BlueComponents.js

@@ -234,6 +234,10 @@ export class BlueWalletNavigationHeader extends Component {
     });
   }
 
+  manageFundsPressed = () => {
+    this.props.onManageFundsPressed();
+  };
+
   render() {
     return (
       <LinearGradient
@@ -300,7 +304,7 @@ export class BlueWalletNavigationHeader extends Component {
           )}
         </TouchableOpacity>
         {this.state.wallet.type === LightningCustodianWallet.type && (
-          <TouchableOpacity onPress={() => NavigationService.navigate('ManageFunds', { fromWallet: this.state.wallet })}>
+          <TouchableOpacity onPress={this.manageFundsPressed}>
             <View
               style={{
                 marginTop: 14,

MainBottomTabs.js

@@ -41,7 +41,6 @@ import sendCreate from './screen/send/create';
 import Confirm from './screen/send/confirm';
 import Success from './screen/send/success';
 
-import ManageFunds from './screen/lnd/manageFunds';
 import ScanLndInvoice from './screen/lnd/scanLndInvoice';
 import LappBrowser from './screen/lnd/browser';
 import LNDCreateInvoice from './screen/lnd/lndCreateInvoice';
@@ -170,21 +169,6 @@ const CreateTransactionStackNavigator = createStackNavigator({
   },
 });
 
-const ManageFundsStackNavigator = createStackNavigator({
-  ManageFunds: {
-    screen: ManageFunds,
-  },
-  SelectWallet: {
-    screen: SelectWallet,
-  },
-  SendDetails: {
-    screen: CreateTransactionStackNavigator,
-    navigationOptions: {
-      header: null,
-    },
-  },
-});
-
 const LNDCreateInvoiceStackNavigator = createStackNavigator({
   LNDCreateInvoice: {
     screen: LNDCreateInvoice,
@@ -260,6 +244,12 @@ const MainBottomTabs = createStackNavigator(
         header: null,
       },
     },
+    SelectWallet: {
+      screen: SelectWallet,
+      navigationOptions: {
+        headerLeft: null,
+      }
+    },
 
     //
 
@@ -275,12 +265,6 @@ const MainBottomTabs = createStackNavigator(
 
     // LND:
 
-    ManageFunds: {
-      screen: ManageFundsStackNavigator,
-      navigationOptions: {
-        header: null,
-      },
-    },
     ScanLndInvoice: {
       screen: LightningScanInvoiceStackNavigator,
       navigationOptions: {

screen/lnd/manageFunds.js

@@ -1,98 +0,0 @@
-/* global alert */
-import React, { Component } from 'react';
-import { TouchableOpacity, Linking, View } from 'react-native';
-import { BlueSpacingVariable, BlueNavigationStyle, SafeBlueArea, BlueCard } from '../../BlueComponents';
-import { ListItem } from 'react-native-elements';
-import PropTypes from 'prop-types';
-import { Chain } from '../../models/bitcoinUnits';
-/** @type {AppStorage} */
-let BlueApp = require('../../BlueApp');
-let loc = require('../../loc');
-
-export default class ManageFunds extends Component {
-  static navigationOptions = ({ navigation }) => ({
-    ...BlueNavigationStyle(navigation, true),
-    title: loc.lnd.title,
-    headerLeft: null,
-  });
-
-  constructor(props) {
-    super(props);
-    this.onWalletSelect = this.onWalletSelect.bind(this);
-    if (!props.navigation.getParam('fromWallet')) throw new Error('Invalid param');
-
-    this.state = { fromWallet: props.navigation.getParam('fromWallet') };
-  }
-
-  async onWalletSelect(wallet) {
-    this.props.navigation.dismiss();
-    /** @type {LightningCustodianWallet} */
-    let toAddress = false;
-    if (this.state.fromWallet.refill_addressess.length > 0) {
-      toAddress = this.state.fromWallet.refill_addressess[0];
-    } else {
-      try {
-        await this.state.fromWallet.fetchBtcAddress();
-        toAddress = this.state.fromWallet.refill_addressess[0];
-      } catch (Err) {
-        return alert(Err.message);
-      }
-    }
-
-    if (wallet) {
-      setTimeout(() => {
-        this.props.navigation.navigate('SendDetails', {
-          memo: loc.lnd.refill_lnd_balance,
-          fromSecret: wallet.getSecret(),
-          address: toAddress,
-          fromWallet: wallet,
-        });
-      }, 100);
-    } else {
-      return alert('Internal error');
-    }
-  }
-
-  render() {
-    return (
-      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
-        <BlueSpacingVariable />
-
-        <BlueCard>
-          <ListItem
-            titleStyle={{ color: BlueApp.settings.foregroundColor }}
-            component={TouchableOpacity}
-            onPress={a => {
-              this.props.navigation.navigate('SelectWallet', { onWalletSelect: this.onWalletSelect, chainType: Chain.ONCHAIN });
-            }}
-            title={loc.lnd.refill}
-          />
-          <ListItem
-            titleStyle={{ color: BlueApp.settings.foregroundColor }}
-            component={TouchableOpacity}
-            onPress={a => {
-              Linking.openURL('https://zigzag.io/?utm_source=integration&utm_medium=bluewallet&utm_campaign=withdrawLink');
-            }}
-            title={loc.lnd.withdraw}
-          />
-
-          <View />
-        </BlueCard>
-      </SafeBlueArea>
-    );
-  }
-}
-
-ManageFunds.propTypes = {
-  navigation: PropTypes.shape({
-    goBack: PropTypes.func,
-    dismiss: PropTypes.func,
-    navigate: PropTypes.func,
-    getParam: PropTypes.func,
-    state: PropTypes.shape({
-      params: PropTypes.shape({
-        fromSecret: PropTypes.string,
-      }),
-    }),
-  }),
-};

screen/receive/details.js

@@ -70,15 +70,12 @@ export default class ReceiveDetails extends Component {
           address: address,
           addressText: address,
         });
-      } else if (wallet.getAddress) {
-        address = wallet.getAddress();
+      } else if (wallet.getAddress && address.trim().length === 0) {
         this.setState({
           address: address,
           addressText: address,
         });
       } else {
-        alert('There was a problem obtaining your receive address. Please, try again.');
-        this.props.navigation.goBack();
         this.setState({
           address,
           addressText: address,

screen/send/details.js

@@ -37,8 +37,8 @@ import BitcoinBIP70TransactionDecode from '../../bip70/bip70';
 import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
 import { HDLegacyP2PKHWallet, HDSegwitBech32Wallet, HDSegwitP2SHWallet, LightningCustodianWallet } from '../../class';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-const bitcoin = require('bitcoinjs-lib');
 import { BitcoinTransaction } from '../../models/bitcoinTransactionInfo';
+const bitcoin = require('bitcoinjs-lib');
 const bip21 = require('bip21');
 let BigNumber = require('bignumber.js');
 const { width } = Dimensions.get('window');

screen/wallets/transactions.js

@@ -4,21 +4,33 @@ import { Chain } from '../../models/bitcoinUnits';
 import {
   Text,
   Platform,
+  StyleSheet,
   View,
+  Keyboard,
   ActivityIndicator,
   InteractionManager,
   FlatList,
   RefreshControl,
   TouchableOpacity,
   StatusBar,
+  Linking,
+  KeyboardAvoidingView,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { NavigationEvents } from 'react-navigation';
-import { BlueSendButtonIcon, BlueReceiveButtonIcon, BlueTransactionListItem, BlueWalletNavigationHeader } from '../../BlueComponents';
+import {
+  BlueSendButtonIcon,
+  BlueListItem,
+  BlueReceiveButtonIcon,
+  BlueTransactionListItem,
+  BlueWalletNavigationHeader,
+} from '../../BlueComponents';
 import { Icon } from 'react-native-elements';
 import { LightningCustodianWallet } from '../../class';
 import Handoff from 'react-native-handoff';
 import { ScrollView } from 'react-native-gesture-handler';
+import Modal from 'react-native-modal';
+import NavigationService from '../../NavigationService';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
@@ -63,6 +75,7 @@ export default class WalletTransactions extends Component {
     this.state = {
       showMarketplace: Platform.OS !== 'ios',
       isLoading: true,
+      isManageFundsModalVisible: false,
       showShowFlatListRefreshControl: false,
       wallet: wallet,
       dataSource: this.getTransactions(15),
@@ -206,7 +219,101 @@ export default class WalletTransactions extends Component {
       </View>
     );
   };
-  
+
+  renderManageFundsModal = () => {
+    return (
+      <Modal
+        isVisible={this.state.isManageFundsModalVisible}
+        style={styles.bottomModal}
+        onBackdropPress={() => {
+          Keyboard.dismiss();
+          this.setState({ isManageFundsModalVisible: false });
+        }}
+      >
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
+          <View style={styles.advancedTransactionOptionsModalContent}>
+            <BlueListItem
+              hideChevron
+              component={TouchableOpacity}
+              onPress={a => {
+                const wallets = [...BlueApp.getWallets().filter(item => item.chain === Chain.ONCHAIN && item.allowSend())];
+                if (wallets.length === 0) {
+                  alert('In order to proceed, please create a Bitcoin wallet to refill with.');
+                } else {
+                  this.setState({ isManageFundsModalVisible: false });
+                  this.props.navigation.navigate('SelectWallet', { onWalletSelect: this.onWalletSelect, chainType: Chain.ONCHAIN });  
+                }
+              }}
+              title={loc.lnd.refill}
+            />
+            <BlueListItem
+              hideChevron
+              component={TouchableOpacity}
+              onPress={a => {
+                this.setState({ isManageFundsModalVisible: false }, async () => {
+                  /** @type {LightningCustodianWallet} */
+                  let toAddress = false;
+                  if (this.state.wallet.refill_addressess.length > 0) {
+                    toAddress = this.state.wallet.refill_addressess[0];
+                  } else {
+                    try {
+                      await this.state.wallet.fetchBtcAddress();
+                      toAddress = this.state.wallet.refill_addressess[0];
+                    } catch (Err) {
+                      return alert(Err.message);
+                    }
+                  }
+                  this.props.navigation.navigate('ReceiveDetails', {
+                    address: toAddress,
+                    secret: this.state.wallet.getSecret(),
+                  });
+                });
+              }}
+              title={'Refill with External Wallet'}
+            />
+
+            <BlueListItem
+              title={loc.lnd.withdraw}
+              hideChevron
+              component={TouchableOpacity}
+              onPress={a => {
+                this.setState({ isManageFundsModalVisible: false });
+                Linking.openURL('https://zigzag.io/?utm_source=integration&utm_medium=bluewallet&utm_campaign=withdrawLink');
+              }}
+            />
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  };
+
+  onWalletSelect = async wallet => {
+    NavigationService.navigate('WalletTransactions');
+    /** @type {LightningCustodianWallet} */
+    let toAddress = false;
+    if (this.state.wallet.refill_addressess.length > 0) {
+      toAddress = this.state.wallet.refill_addressess[0];
+    } else {
+      try {
+        await this.state.wallet.fetchBtcAddress();
+        toAddress = this.state.wallet.refill_addressess[0];
+      } catch (Err) {
+        return alert(Err.message);
+      }
+    }
+
+    if (wallet) {
+      this.props.navigation.navigate('SendDetails', {
+        memo: loc.lnd.refill_lnd_balance,
+        fromSecret: wallet.getSecret(),
+        address: toAddress,
+        fromWallet: wallet,
+      });
+    } else {
+      return alert('Internal error');
+    }
+  };
+
   async onWillBlur() {
     StatusBar.setBarStyle('dark-content');
   }
@@ -245,6 +352,7 @@ export default class WalletTransactions extends Component {
               this.setState({ wallet }, () => InteractionManager.runAfterInteractions(() => BlueApp.saveToDisk()));
             })
           }
+          onManageFundsPressed={() => this.setState({ isManageFundsModalVisible: true })}
         />
         <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
           {this.state.showMarketplace && (
@@ -343,6 +451,7 @@ export default class WalletTransactions extends Component {
             renderItem={this.renderItem}
             contentInset={{ top: 0, left: 0, bottom: 90, right: 0 }}
           />
+          {this.renderManageFundsModal()}
         </View>
         <View
           style={{
@@ -397,6 +506,32 @@ export default class WalletTransactions extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  modalContent: {
+    backgroundColor: '#FFFFFF',
+    padding: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    borderColor: 'rgba(0, 0, 0, 0.1)',
+    minHeight: 200,
+    height: 200,
+  },
+  advancedTransactionOptionsModalContent: {
+    backgroundColor: '#FFFFFF',
+    padding: 22,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    borderColor: 'rgba(0, 0, 0, 0.1)',
+    minHeight: 130,
+  },
+  bottomModal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+});
+
 WalletTransactions.propTypes = {
   navigation: PropTypes.shape({
     navigate: PropTypes.func,