mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-22 15:04:50 +01:00
Feature: let user set amount and label on receive screen
This commit is contained in:
parent
f1d662b868
commit
97fce4c4c4
2 changed files with 107 additions and 30 deletions
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Add table
Reference in a new issue