ADD: CoinsSelected component

components/CoinsSelected.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Avatar } from 'react-native-elements';
+
+import loc from '../loc';
+
+const styles = StyleSheet.create({
+  root: {
+    height: 48,
+    borderRadius: 8,
+    backgroundColor: '#3477F6',
+    flexDirection: 'row',
+  },
+  labelContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingLeft: 16,
+  },
+  labelText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  buttonContainer: {
+    width: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ball: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    backgroundColor: 'rgba(255, 255, 255, 0.32)',
+  },
+});
+
+const CoinsSelected = ({ number, onClose }) => (
+  <View style={styles.root}>
+    <View style={styles.labelContainer}>
+      <Text style={styles.labelText}>{loc.formatString(loc.cc.coins_selected, { number })}</Text>
+    </View>
+    <TouchableOpacity style={styles.buttonContainer} onPress={onClose}>
+      <Avatar rounded containerStyle={[styles.ball]} icon={{ name: 'close', size: 22, type: 'ionicons', color: 'white' }} />
+    </TouchableOpacity>
+  </View>
+);
+
+CoinsSelected.propTypes = {
+  number: PropTypes.number.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default CoinsSelected;

loc/en.json

@@ -448,10 +448,11 @@
   },
   "cc": {
     "change": "change",
+    "coins_selected": "Coins selected ({number})",
     "empty": "Wallet UTXO set is empty",
     "freeze": "freeze",
     "freezeLabel": "Freeze",
     "header": "Coin control",
-    "useCoin": "Use coin"
+    "use_coin": "Use coin"
   }
 }

screen/send/coinControl.js

@@ -152,7 +152,7 @@ const OutputModalContent = ({ output, wallet, onUseCoin }) => {
       <BlueListItem title={loc.cc.freezeLabel} Component={TouchableWithoutFeedback} switch={switchValue} />
       <BlueSpacing20 />
       <View style={mStyles.buttonContainer}>
-        <BlueButton testID="UseCoin" title={loc.cc.useCoin} onPress={() => onUseCoin([output])} />
+        <BlueButton testID="UseCoin" title={loc.cc.use_coin} onPress={() => onUseCoin([output])} />
       </View>
       <BlueSpacing20 />
     </>

screen/send/details.js

@@ -44,6 +44,7 @@ import DocumentPicker from 'react-native-document-picker';
 import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
 import loc, { formatBalanceWithoutSuffix } from '../../loc';
 import { BlueCurrentTheme } from '../../components/themes';
+import CoinsSelected from '../../components/CoinsSelected';
 import { AbstractHDElectrumWallet } from '../../class/wallets/abstract-hd-electrum-wallet';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 const currency = require('../../blue_modules/currency');
@@ -138,6 +139,7 @@ const styles = StyleSheet.create({
   },
   select: {
     marginBottom: 24,
+    marginHorizontal: 24,
     alignItems: 'center',
   },
   selectTouch: {
@@ -253,7 +255,7 @@ export default class SendDetails extends Component {
         },
         feeUnit: fromWallet.getPreferredBalanceUnit(),
         amountUnit: fromWallet.preferredBalanceUnit, // default for whole screen
-        renderWalletSelectionButtonHidden: false,
+        renderWalletSelectionOrCoinsSelectedHidden: false,
         width: Dimensions.get('window').width - 320,
         utxo: null,
       };
@@ -406,11 +408,11 @@ export default class SendDetails extends Component {
   }
 
   _keyboardDidShow = () => {
-    this.setState({ renderWalletSelectionButtonHidden: true, isAmountToolbarVisibleForAndroid: true });
+    this.setState({ renderWalletSelectionOrCoinsSelectedHidden: true, isAmountToolbarVisibleForAndroid: true });
   };
 
   _keyboardDidHide = () => {
-    this.setState({ renderWalletSelectionButtonHidden: false, isAmountToolbarVisibleForAndroid: false });
+    this.setState({ renderWalletSelectionOrCoinsSelectedHidden: false, isAmountToolbarVisibleForAndroid: false });
   };
 
   async createTransaction() {
@@ -1119,8 +1121,17 @@ export default class SendDetails extends Component {
     );
   };
 
-  renderWalletSelectionButton = () => {
-    if (this.state.renderWalletSelectionButtonHidden) return;
+  renderWalletSelectionOrCoinsSelected = () => {
+    if (this.state.renderWalletSelectionOrCoinsSelectedHidden) return;
+
+    if (this.state.utxo !== null) {
+      return (
+        <View style={styles.select}>
+          <CoinsSelected number={this.state.utxo.length} onClose={() => this.setState({ utxo: null }, this.reCalcTx)} />
+        </View>
+      );
+    }
+
     return (
       <View style={styles.select}>
         {!this.state.isLoading && (
@@ -1380,7 +1391,7 @@ export default class SendDetails extends Component {
             ),
           })}
 
-          {this.renderWalletSelectionButton()}
+          {this.renderWalletSelectionOrCoinsSelected()}
         </View>
       </TouchableWithoutFeedback>
     );