ADD: Select Wallet on Send screen

MainBottomTabs.js

@@ -16,6 +16,7 @@ import WalletExport from './screen/wallets/export';
 import BuyBitcoin from './screen/wallets/buyBitcoin';
 import scanQrWif from './screen/wallets/scanQrWif';
 import ReorderWallets from './screen/wallets/reorderWallets';
+import SelectWallet from './screen/wallets/selectWallet';
 
 import details from './screen/transactions/details';
 import rbf from './screen/transactions/RBF';
@@ -118,6 +119,9 @@ const CreateTransactionStackNavigator = createStackNavigator({
   Success: {
     screen: Success,
   },
+  SelectWallet: {
+    screen: SelectWallet,
+  },
 });
 
 const MainBottomTabs = createStackNavigator(
@@ -177,6 +181,12 @@ const MainBottomTabs = createStackNavigator(
         header: null,
       },
     },
+
+    // Select Wallet. Mostly for deeplinking
+
+    SelectWallet: {
+      screen: SelectWallet,
+    },
   },
   {
     mode: 'modal',

loc/en.js

@@ -10,6 +10,7 @@ module.exports = {
     never: 'never',
   },
   wallets: {
+    select_wallet: 'Select Wallet',
     options: 'options',
     list: {
       app_name: 'Blue Wallet',

loc/es.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   wallets: {
     options: 'opciones',
+    select_wallet: 'Selecciona billetera',
     list: {
       app_name: 'Blue Wallet',
       title: 'billeteras',

loc/index.js

@@ -86,10 +86,10 @@ strings.formatBalance = (balance, toUnit) => {
     return balance + ' ' + BitcoinUnit.BTC;
   }
   if (toUnit === BitcoinUnit.BTC) {
-    return balance + ' BTC';
+    return balance + ' ' + BitcoinUnit.BTC;
   } else if (toUnit === BitcoinUnit.SATS) {
     const value = new BigNumber(balance).multipliedBy(0.001);
-    return parseInt(value.toString().replace('.', '')).toString() + ' sats';
+    return parseInt(value.toString().replace('.', '')).toString() + ' ' + BitcoinUnit.SATS;
   } else if (toUnit === BitcoinUnit.LOCAL_CURRENCY) {
     return currency.BTCToLocalCurrency(balance);
   }

loc/pt_BR.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   wallets: {
     options: 'options',
+    select_wallet: 'Select Wallet',
     list: {
       tabBarLabel: 'Wallets',
       app_name: 'Blue Wallet',

loc/pt_PT.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   wallets: {
     options: 'options',
+    select_wallet: 'Select Wallet',
     list: {
       app_name: 'Blue Wallet',
       title: 'wallets',

loc/ru.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   wallets: {
     options: 'options',
+    select_wallet: 'Select Wallet',
     list: {
       app_name: 'BlueWallet',
       title: 'кошельки',

loc/ua.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   wallets: {
     options: 'options',
+    select_wallet: 'Select Wallet',
     list: {
       app_name: 'BlueWallet',
       title: 'гаманці',

screen/send/details.js

@@ -11,8 +11,9 @@ import {
   StyleSheet,
   Platform,
   Slider,
+  Text,
 } from 'react-native';
-import { Text, Icon } from 'react-native-elements';
+import { Icon } from 'react-native-elements';
 import { BlueNavigationStyle, BlueButton } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
@@ -360,6 +361,12 @@ export default class SendDetails extends Component {
     });
   }
 
+  onWalletSelect = wallet => {
+    this.setState({ fromAddress: wallet.getAddress(), fromSecret: wallet.getSecret(), fromWallet: wallet }, () =>
+      this.props.navigation.goBack(null),
+    );
+  };
+
   renderFeeSelectionModal = () => {
     return (
       <Modal
@@ -438,6 +445,33 @@ export default class SendDetails extends Component {
     );
   };
 
+  renderWalletSelectionButton = () => {
+    return (
+      <View style={{ marginBottom: 24, alignItems: 'center' }}>
+        {!this.state.isLoading && (
+          <TouchableOpacity
+            style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 16 }}
+            onPress={() => this.props.navigation.navigate('SelectWallet', { onWalletSelect: this.onWalletSelect })}
+          >
+            <Text style={{ color: '#9aa0aa', fontSize: 14, paddingHorizontal: 16, alignSelf: 'center' }}>
+              {loc.wallets.select_wallet.toLowerCase()}
+            </Text>
+            <Icon name="angle-right" size={22} type="font-awesome" color="#9aa0aa" />
+          </TouchableOpacity>
+        )}
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 4 }}>
+          <Text style={{ color: '#0c2550', fontSize: 14 }}>{this.state.fromWallet.getLabel()}</Text>
+          <Text style={{ color: '#0c2550', fontSize: 14, fontWeight: '600', marginLeft: 8, marginRight: 4 }}>
+            {this.state.fromWallet.getBalance()}
+          </Text>
+          <Text style={{ color: '#0c2550', fontSize: 11, fontWeight: '600', textAlignVertical: 'bottom', marginTop: 2 }}>
+            {BitcoinUnit.BTC}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
   render() {
     if (!this.state.fromWallet.getAddress) {
       return (
@@ -449,6 +483,7 @@ export default class SendDetails extends Component {
 
     return (
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={{ flex: 1, justifyContent: 'space-between' }}>
           <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
             <KeyboardAvoidingView behavior="position">
               <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
@@ -586,6 +621,8 @@ export default class SendDetails extends Component {
               {this.renderFeeSelectionModal()}
             </KeyboardAvoidingView>
           </View>
+          {this.renderWalletSelectionButton()}
+        </View>
       </TouchableWithoutFeedback>
     );
   }

screen/wallets/selectWallet.js

@@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import { View, ActivityIndicator, Image, Text, TouchableOpacity, FlatList } from 'react-native';
+import { SafeBlueArea, BlueNavigationStyle } from '../../BlueComponents';
+import LinearGradient from 'react-native-linear-gradient';
+import PropTypes from 'prop-types';
+import { WatchOnlyWallet, LegacyWallet } from '../../class';
+import { HDLegacyP2PKHWallet } from '../../class/hd-legacy-p2pkh-wallet';
+import { HDLegacyBreadwalletWallet } from '../../class/hd-legacy-breadwallet-wallet';
+import { HDSegwitP2SHWallet } from '../../class/hd-segwit-p2sh-wallet';
+import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet';
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
+/** @type {AppStorage} */
+let BlueApp = require('../../BlueApp');
+let loc = require('../../loc');
+
+export default class SelectWallet extends Component {
+  static navigationOptions = () => ({
+    ...BlueNavigationStyle(),
+    title: loc.wallets.select_wallet,
+  });
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      data: [],
+    };
+  }
+
+  componentDidMount() {
+    const wallets = BlueApp.getWallets().filter(item => item.type !== new LightningCustodianWallet().type);
+    this.setState({
+      data: wallets,
+      isLoading: false,
+    });
+  }
+
+  _renderItem = ({ item }) => {
+    let gradient1 = '#65ceef';
+    let gradient2 = '#68bbe1';
+
+    if (new WatchOnlyWallet().type === item.type) {
+      gradient1 = '#7d7d7d';
+      gradient2 = '#4a4a4a';
+    }
+
+    if (new LegacyWallet().type === item.type) {
+      gradient1 = '#40fad1';
+      gradient2 = '#15be98';
+    }
+
+    if (new HDLegacyP2PKHWallet().type === item.type) {
+      gradient1 = '#e36dfa';
+      gradient2 = '#bd10e0';
+    }
+
+    if (new HDLegacyBreadwalletWallet().type === item.type) {
+      gradient1 = '#fe6381';
+      gradient2 = '#f99c42';
+    }
+
+    if (new HDSegwitP2SHWallet().type === item.type) {
+      gradient1 = '#c65afb';
+      gradient2 = '#9053fe';
+    }
+
+    if (new LightningCustodianWallet().type === item.type) {
+      gradient1 = '#f1be07';
+      gradient2 = '#f79056';
+    }
+
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          ReactNativeHapticFeedback.trigger('selection', false);
+          this.props.navigation.getParam('onWalletSelect')(item);
+        }}
+      >
+        <View
+          shadowOpacity={40 / 100}
+          shadowOffset={{ width: 0, height: 0 }}
+          shadowRadius={5}
+          style={{ backgroundColor: 'transparent', padding: 10, marginVertical: 17 }}
+        >
+          <LinearGradient
+            shadowColor="#000000"
+            colors={[gradient1, gradient2]}
+            style={{
+              padding: 15,
+              borderRadius: 10,
+              minHeight: 164,
+              elevation: 5,
+            }}
+          >
+            <Image
+              source={
+                (new LightningCustodianWallet().type === item.type && require('../../img/lnd-shape.png')) ||
+                require('../../img/btc-shape.png')
+              }
+              style={{
+                width: 99,
+                height: 94,
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+              }}
+            />
+
+            <Text style={{ backgroundColor: 'transparent' }} />
+            <Text
+              numberOfLines={1}
+              style={{
+                backgroundColor: 'transparent',
+                fontSize: 19,
+                color: '#fff',
+              }}
+            >
+              {item.getLabel()}
+            </Text>
+            <Text
+              numberOfLines={1}
+              adjustsFontSizeToFit
+              style={{
+                backgroundColor: 'transparent',
+                fontWeight: 'bold',
+                fontSize: 36,
+                color: '#fff',
+              }}
+            >
+              {loc.formatBalance(item.getBalance())}
+            </Text>
+            <Text style={{ backgroundColor: 'transparent' }} />
+            <Text
+              numberOfLines={1}
+              style={{
+                backgroundColor: 'transparent',
+                fontSize: 13,
+                color: '#fff',
+              }}
+            >
+              {loc.wallets.list.latest_transaction}
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={{
+                backgroundColor: 'transparent',
+                fontWeight: 'bold',
+                fontSize: 16,
+                color: '#fff',
+              }}
+            >
+              {loc.transactionTimeToReadable(item.getLatestTransactionTime())}
+            </Text>
+          </LinearGradient>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  render() {
+    if (this.state.isLoading || this.state.data.length <= 0) {
+      return (
+        <View style={{ flex: 1, paddingTop: 20 }}>
+          <ActivityIndicator />
+        </View>
+      );
+    }
+
+    return (
+      <SafeBlueArea>
+        <FlatList
+          style={{ flex: 1 }}
+          extraData={this.state.data}
+          data={this.state.data}
+          renderItem={this._renderItem}
+          keyExtractor={(_item, index) => `${index}`}
+        />
+      </SafeBlueArea>
+    );
+  }
+}
+
+SelectWallet.propTypes = {
+  navigation: PropTypes.shape({
+    navigate: PropTypes.func,
+    setParams: PropTypes.func,
+    dismiss: PropTypes.func,
+    getParam: PropTypes.func,
+  }),
+};