Wallet page improvements (#155)

* wallet page send form improvements
* style tweaks for the send form input fields
This commit is contained in:
Akinwale Ariwodola 2018-06-04 17:34:03 +01:00 committed by GitHub
parent cda7e81485
commit 26720dead0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 13 deletions

View file

@ -16,9 +16,13 @@ type Props = {
};
class WalletSend extends React.PureComponent<Props> {
amountInput = null;
state = {
amount: null,
address: null
address: null,
addressChanged: false,
addressValid: false
};
componentWillUpdate(nextProps) {
@ -52,6 +56,22 @@ class WalletSend extends React.PureComponent<Props> {
this.setState({ address: null, amount: null });
}
}
handleAddressInputBlur = () => {
if (this.state.addressChanged && !this.state.addressValid) {
const { notify } = this.props;
notify({
message: 'The recipient address is not a valid LBRY address.',
displayType: ['toast']
});
}
}
handleAddressInputSubmit = () => {
if (this.amountInput) {
this.amountInput.focus();
}
}
render() {
const { balance } = this.props;
@ -62,20 +82,30 @@ class WalletSend extends React.PureComponent<Props> {
return (
<View style={walletStyle.card}>
<Text style={walletStyle.title}>Send Credits</Text>
<Text style={walletStyle.text}>Amount</Text>
<View style={[walletStyle.amountRow, walletStyle.bottomMarginMedium]}>
<TextInput onChangeText={value => this.setState({amount: value})}
keyboardType={'numeric'}
value={this.state.amount}
style={[walletStyle.input, walletStyle.amountInput]} />
<Text style={[walletStyle.text, walletStyle.currency]}>LBC</Text>
</View>
<Text style={walletStyle.text}>Recipient address</Text>
<View style={walletStyle.row}>
<TextInput onChangeText={value => this.setState({address: value})}
<View style={[walletStyle.row, walletStyle.bottomMarginMedium]}>
<TextInput onChangeText={value => this.setState({
address: value,
addressChanged: true,
addressValid: (value.trim().length == 0 || regexAddress.test(value))
})}
onBlur={this.handleAddressInputBlur}
onSubmitEditing={this.handleAddressInputSubmit}
placeholder={'bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs'}
value={this.state.address}
returnKeyType={'next'}
style={[walletStyle.input, walletStyle.addressInput, walletStyle.bottomMarginMedium]} />
</View>
<Text style={walletStyle.text}>Amount</Text>
<View style={walletStyle.row}>
<View style={walletStyle.amountRow}>
<TextInput ref={ref => this.amountInput = ref}
onChangeText={value => this.setState({amount: value})}
keyboardType={'numeric'}
value={this.state.amount}
style={[walletStyle.input, walletStyle.amountInput]} />
<Text style={[walletStyle.text, walletStyle.currency]}>LBC</Text>
</View>
<Button text={'Send'}
style={[walletStyle.button, walletStyle.sendButton]}
disabled={!canSend}

View file

@ -112,10 +112,14 @@ const walletStyle = StyleSheet.create({
},
amountInput: {
alignSelf: 'flex-start',
width: 150
width: 100,
fontSize: 16,
letterSpacing: 1
},
addressInput: {
width: '80%'
flex: 1,
fontSize: 16,
letterSpacing: 1.5
},
warning: {
backgroundColor: Colors.Orange,