diff --git a/src/screens/transfer/container/transferContainer.js b/src/screens/transfer/container/transferContainer.js index 1d7afcd33..a9cc192eb 100644 --- a/src/screens/transfer/container/transferContainer.js +++ b/src/screens/transfer/container/transferContainer.js @@ -8,15 +8,10 @@ import { transferFromSavings, transferToSavings, transferToVesting, + getAccount, } from '../../../providers/steem/dsteem'; import { toastNotification } from '../../../redux/actions/uiAction'; -// Middleware - -// Constants - -// Utilities - // Component import TransferView from '../screen/transferScreen'; @@ -26,15 +21,35 @@ import TransferView from '../screen/transferScreen'; * */ -class ExampleContainer extends Component { +class TransferContainer extends Component { constructor(props) { super(props); this.state = {}; } // Component Life Cycle Functions + componentDidMount() { + const { currentAccount: { name }, navigation } = this.props; + + const balance = navigation.getParam('balance', ''); + + this.setState({ balance }); + + + if (!balance) this.fetchBalance(name); + } // Component Functions + + fetchBalance = (username) => { + getAccount(username) + .then((account) => { + const balance = account[0].balance.replace('STEEM', ''); + + this.setState({ balance: Number(balance) }); + }); + } + _getAccountsWithUsername = async (username) => { const validUsers = await lookupAccounts(username); return validUsers; @@ -92,15 +107,18 @@ class ExampleContainer extends Component { }; render() { - const { accounts, currentAccount, navigation } = this.props; + const { + accounts, currentAccount, navigation, fetchBalance, + } = this.props; + const { balance } = this.state; const fundType = navigation.getParam('fundType', ''); - const balance = navigation.getParam('balance', ''); const transferType = navigation.getParam('transferType', ''); return ( ({ pinCode: state.account.pin, }); -export default connect(mapStateToProps)(ExampleContainer); +export default connect(mapStateToProps)(TransferContainer); diff --git a/src/screens/transfer/screen/transferScreen.js b/src/screens/transfer/screen/transferScreen.js index 950f3d237..cbbac8c0a 100644 --- a/src/screens/transfer/screen/transferScreen.js +++ b/src/screens/transfer/screen/transferScreen.js @@ -32,6 +32,7 @@ class TransferView extends Component { memo: '', isUsernameValid: false, steemConnectTransfer: false, + isTransfering: false, }; } @@ -52,7 +53,9 @@ class TransferView extends Component { this.setState({ [key]: value }); break; case 'amount': - if (!isNaN(value) && parseFloat(value) <= parseFloat(balance)) this.setState({ [key]: value }); + if ((parseFloat(Number(value)) <= parseFloat(balance))) { + this.setState({ [key]: value }); + } break; default: @@ -68,6 +71,8 @@ class TransferView extends Component { from, destination, amount, memo, } = this.state; + this.setState({ isTransfering: true }); + if (accountType === AUTH_TYPE.STEEM_CONNECT) { this.setState({ steemConnectTransfer: true }); } else { @@ -75,34 +80,58 @@ class TransferView extends Component { } }; - _renderInput = (placeholder, state, keyboardType) => ( + _handleOnAmountChange = (state, amount) => { + let _amount = amount; + if (_amount.includes(',')) { + _amount = amount.replace(',', '.'); + } + + this._setState(state, _amount); + } + + _renderInput = (placeholder, state, keyboardType, isTextArea) => ( this._setState(state, text)} + style={[isTextArea ? styles.textarea : styles.input]} + onChangeText={amount => this._handleOnAmountChange(state, amount)} value={this.state[state]} placeholder={placeholder} placeholderTextColor="#c1c5c7" autoCapitalize="none" + multiline={isTextArea} + numberOfLines={isTextArea ? 4 : 1} keyboardType={keyboardType} /> ); _renderDropdown = accounts => ( item.username)} defaultText={accounts[0].username} selectedOptionIndex={0} - onSelect={(index, value) => this.setState({ from: value })} + onSelect={(index, value) => this._handleOnDropdownChange(value)} /> ); + _handleOnDropdownChange = (value) => { + const { fetchBalance } = this.props; + + fetchBalance(value); + this.setState({ from: value }); + } + _renderDescription = text => {text}; render() { - const { accounts, intl, handleOnModalClose, balance, fundType, transferType } = this.props; const { - destination, isUsernameValid, amount, steemConnectTransfer, memo, + accounts, intl, handleOnModalClose, balance, fundType, transferType, + } = this.props; + const { + destination, isUsernameValid, amount, steemConnectTransfer, memo, isTransfering, } = this.state; const path = `sign/transfer?from=${ @@ -148,7 +177,7 @@ class TransferView extends Component { /> this._renderInput(intl.formatMessage({ id: 'transfer.memo_placeholder' }), 'memo', 'default') + rightComponent={() => this._renderInput(intl.formatMessage({ id: 'transfer.memo_placeholder' }), 'memo', 'default', true) } /> this.ActionSheet.show()} + isLoading={isTransfering} > NEXT diff --git a/src/screens/transfer/screen/transferStyles.js b/src/screens/transfer/screen/transferStyles.js index 3a93cebec..bcad2ab67 100644 --- a/src/screens/transfer/screen/transferStyles.js +++ b/src/screens/transfer/screen/transferStyles.js @@ -26,9 +26,19 @@ export default EStyleSheet.create({ input: { borderWidth: 1, borderColor: '$borderColor', - borderRadius: 10, + borderRadius: 8, padding: 10, color: '$primaryBlack', + width: 172, + }, + textarea: { + borderWidth: 1, + borderColor: '$borderColor', + borderRadius: 8, + padding: 10, + color: '$primaryBlack', + width: 172, + height: 75, }, description: { color: '$iconColor', @@ -42,16 +52,37 @@ export default EStyleSheet.create({ buttonText: { color: 'white', }, - dropdown: { - borderWidth: 1, - borderColor: '$borderColor', - borderRadius: 10, - flex: 1, - padding: 10, - }, icon: { fontSize: 40, color: '$iconColor', marginHorizontal: 20, }, + rowTextStyle: { + fontSize: 12, + color: '$primaryDarkGray', + padding: 5, + }, + dropdownText: { + fontSize: 14, + paddingLeft: 16, + paddingHorizontal: 14, + color: '$primaryDarkGray', + }, + dropdownStyle: { + marginTop: 15, + minWidth: 192, + width: 192, + maxHeight: '$deviceHeight - 200', + }, + dropdownButtonStyle: { + backgroundColor: '$primaryGray', + height: 44, + width: 172, + borderRadius: 8, + marginHorizontal: 2, + }, + dropdown: { + flexGrow: 1, + width: 150, + }, });