Feature: let user set amount and label on receive screen

This commit is contained in:
Pavel Ševčík 2018-12-21 13:38:42 +01:00
parent f1d662b868
commit 97fce4c4c4
2 changed files with 107 additions and 30 deletions

View file

@ -153,6 +153,8 @@ module.exports = {
title: 'Share this address with payer',
share: 'share',
copiedToClipboard: 'Copied to clipboard.',
amount: 'amount to receive (BTC)',
label: 'note to sender',
},
},
buyBitcoin: {

View file

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share } from 'react-native';
import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share, TextInput, KeyboardAvoidingView } from 'react-native';
import { QRCode } from 'react-native-custom-qr-codes';
import bip21 from 'bip21';
import { BlueLoading, SafeBlueArea, BlueButton, BlueNavigationStyle, is } from '../../BlueComponents';
@ -26,6 +26,8 @@ export default class ReceiveDetails extends Component {
address: address,
secret: secret,
addressText: '',
amount: undefined,
label: undefined,
};
// EV(EV.enum.RECEIVE_ADDRESS_CHANGED, this.refreshFunction.bind(this));
@ -77,44 +79,117 @@ export default class ReceiveDetails extends Component {
});
};
setAmount = value => {
if (!value || parseFloat(value) <= 0) {
this.setState({ amount: undefined });
} else {
this.setState({ amount: value });
}
};
setLabel = text => {
if (!text) {
this.setState({ label: undefined });
} else {
this.setState({ label: text });
}
};
render() {
console.log('render() receive/details, address,secret=', this.state.address, ',', this.state.secret);
if (this.state.isLoading) {
return <BlueLoading />;
}
const { amount, label } = this.state;
return (
<SafeBlueArea style={{ flex: 1 }}>
<View style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 16 }}>
<QRCode
content={bip21.encode(this.state.address)}
size={(is.ipad() && 300) || 300}
color={BlueApp.settings.foregroundColor}
backgroundColor={BlueApp.settings.brandingColor}
logo={require('../../img/qr-code.png')}
/>
<TouchableOpacity onPress={this.copyToClipboard}>
<Animated.Text style={styles.address} numberOfLines={0}>
{this.state.addressText}
</Animated.Text>
</TouchableOpacity>
</View>
<View style={{ marginBottom: 24 }}>
<BlueButton
icon={{
name: 'share-alternative',
type: 'entypo',
color: BlueApp.settings.buttonTextColor,
}}
onPress={async () => {
Share.share({
message: this.state.address,
});
}}
title={loc.receive.details.share}
/>
</View>
<KeyboardAvoidingView behavior="position">
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 16 }}>
<QRCode
content={bip21.encode(this.state.address, { amount, label })}
size={(is.ipad() && 300) || 300}
color={BlueApp.settings.foregroundColor}
backgroundColor={BlueApp.settings.brandingColor}
logo={require('../../img/qr-code.png')}
/>
<TouchableOpacity onPress={this.copyToClipboard}>
<Animated.Text style={styles.address} numberOfLines={0}>
{this.state.addressText}
</Animated.Text>
</TouchableOpacity>
<View
style={{
flexDirection: 'row',
borderColor: '#d2d2d2',
borderBottomColor: '#d2d2d2',
borderWidth: 1.0,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
minHeight: 44,
height: 44,
marginHorizontal: 20,
alignItems: 'center',
marginVertical: 8,
borderRadius: 4,
width: '100%',
}}
>
<TextInput
onChangeText={this.setLabel}
placeholder={loc.receive.details.label}
value={this.state.label}
numberOfLines={1}
style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
editable={!this.state.isLoading}
/>
</View>
<View
style={{
flexDirection: 'row',
borderColor: '#d2d2d2',
borderBottomColor: '#d2d2d2',
borderWidth: 1.0,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
minHeight: 44,
height: 44,
marginHorizontal: 20,
alignItems: 'center',
marginVertical: 8,
borderRadius: 4,
width: '100%',
}}
>
<TextInput
onChangeText={this.setAmount}
placeholder={loc.receive.details.amount}
value={this.state.amount}
numberOfLines={1}
style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
editable={!this.state.isLoading}
keyboardType="numeric"
/>
</View>
</View>
<View style={{ marginBottom: 24 }}>
<BlueButton
icon={{
name: 'share-alternative',
type: 'entypo',
color: BlueApp.settings.buttonTextColor,
}}
onPress={async () => {
Share.share({
message: this.state.address,
});
}}
title={loc.receive.details.share}
/>
</View>
</KeyboardAvoidingView>
</View>
</SafeBlueArea>
);