diff --git a/components/CoinsSelected.js b/components/CoinsSelected.js new file mode 100644 index 000000000..4f67a08a7 --- /dev/null +++ b/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 }) => ( + + + {loc.formatString(loc.cc.coins_selected, { number })} + + + + + +); + +CoinsSelected.propTypes = { + number: PropTypes.number.isRequired, + onClose: PropTypes.func.isRequired, +}; + +export default CoinsSelected; diff --git a/loc/en.json b/loc/en.json index d6b7adcb9..c68aa6f1f 100644 --- a/loc/en.json +++ b/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" } } diff --git a/screen/send/coinControl.js b/screen/send/coinControl.js index c5218fba4..721c49d5b 100644 --- a/screen/send/coinControl.js +++ b/screen/send/coinControl.js @@ -152,7 +152,7 @@ const OutputModalContent = ({ output, wallet, onUseCoin }) => { - onUseCoin([output])} /> + onUseCoin([output])} /> diff --git a/screen/send/details.js b/screen/send/details.js index 193dc1cc5..78386023d 100644 --- a/screen/send/details.js +++ b/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 ( + + this.setState({ utxo: null }, this.reCalcTx)} /> + + ); + } + return ( {!this.state.isLoading && ( @@ -1380,7 +1391,7 @@ export default class SendDetails extends Component { ), })} - {this.renderWalletSelectionButton()} + {this.renderWalletSelectionOrCoinsSelected()} );