mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-03-26 08:55:56 +01:00
REF: Custom receive
Update details.js
This commit is contained in:
Marcos Rodriguez
Overtorment
parent
5f50be22f2
commit
b30656e1ff
4 changed files with 124 additions and 192 deletions
|
|
@ -53,7 +53,7 @@ export class BlueButton extends Component {
|
|||
backgroundColor = BlueApp.settings.buttonDisabledBackgroundColor;
|
||||
fontColor = BlueApp.settings.buttonDisabledTextColor;
|
||||
}
|
||||
let buttonWidth = width / 1.5;
|
||||
let buttonWidth = this.props.width ? this.props.width : width / 1.5;
|
||||
if (this.props.hasOwnProperty('noMinWidth')) {
|
||||
buttonWidth = 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ import rbfBumpFee from './screen/transactions/RBFBumpFee';
|
|||
import rbfCancel from './screen/transactions/RBFCancel';
|
||||
|
||||
import receiveDetails from './screen/receive/details';
|
||||
import setReceiveAmount from './screen/receive/receiveAmount';
|
||||
|
||||
import sendDetails from './screen/send/details';
|
||||
import ScanQRCode from './screen/send/scanQrAddress';
|
||||
|
|
@ -304,10 +303,6 @@ const MainBottomTabs = createStackNavigator(
|
|||
screen: receiveDetails,
|
||||
},
|
||||
|
||||
ReceiveAmount: {
|
||||
screen: setReceiveAmount,
|
||||
},
|
||||
|
||||
//
|
||||
|
||||
// LND:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from 'react';
|
||||
import { View, InteractionManager, ScrollView } from 'react-native';
|
||||
import { View, InteractionManager, Platform, TextInput, KeyboardAvoidingView, Keyboard, StyleSheet, ScrollView } from 'react-native';
|
||||
import QRCode from 'react-native-qrcode-svg';
|
||||
import bip21 from 'bip21';
|
||||
import {
|
||||
|
|
@ -10,14 +10,18 @@ import {
|
|||
BlueButtonLink,
|
||||
BlueNavigationStyle,
|
||||
is,
|
||||
BlueBitcoinAmount,
|
||||
BlueText,
|
||||
BlueSpacing20,
|
||||
} from '../../BlueComponents';
|
||||
import PropTypes from 'prop-types';
|
||||
import Privacy from '../../Privacy';
|
||||
import Share from 'react-native-share';
|
||||
import { Chain } from '../../models/bitcoinUnits';
|
||||
import { Chain, BitcoinUnit } from '../../models/bitcoinUnits';
|
||||
import Modal from 'react-native-modal';
|
||||
/** @type {AppStorage} */
|
||||
let BlueApp = require('../../BlueApp');
|
||||
let loc = require('../../loc');
|
||||
const BlueApp = require('../../BlueApp');
|
||||
const loc = require('../../loc');
|
||||
|
||||
export default class ReceiveDetails extends Component {
|
||||
static navigationOptions = ({ navigation }) => ({
|
||||
|
|
@ -33,7 +37,11 @@ export default class ReceiveDetails extends Component {
|
|||
this.state = {
|
||||
secret: secret,
|
||||
addressText: '',
|
||||
customLabel: '',
|
||||
customAmount: 0,
|
||||
bip21encoded: undefined,
|
||||
isCustom: false,
|
||||
isCustomModalVisible: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -82,12 +90,10 @@ export default class ReceiveDetails extends Component {
|
|||
}
|
||||
this.setState({
|
||||
address: address,
|
||||
addressText: address,
|
||||
});
|
||||
} else if (wallet.getAddress) {
|
||||
this.setState({
|
||||
address: wallet.getAddress(),
|
||||
addressText: wallet.getAddress(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -99,15 +105,102 @@ export default class ReceiveDetails extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
componentWillUnmount() {
|
||||
Privacy.disableBlur();
|
||||
}
|
||||
|
||||
renderCustomAmountModal = () => {
|
||||
return (
|
||||
<Modal
|
||||
isVisible={this.state.isCustomModalVisible}
|
||||
style={styles.bottomModal}
|
||||
onBackdropPress={() => {
|
||||
Keyboard.dismiss();
|
||||
this.setState({ isCustomModalVisible: false });
|
||||
}}
|
||||
>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
|
||||
<View style={styles.modalContent}>
|
||||
<BlueBitcoinAmount amount={this.state.customAmount || ''} onChangeText={text => this.setState({ customAmount: text })} />
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
onChangeText={text => this.setState({ customLabel: text })}
|
||||
placeholder={loc.receive.details.label}
|
||||
value={this.state.customLabel || ''}
|
||||
numberOfLines={1}
|
||||
style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
|
||||
/>
|
||||
</View>
|
||||
<BlueSpacing20 />
|
||||
<View>
|
||||
<BlueButton
|
||||
title={loc.receive.details.create}
|
||||
onPress={() => {
|
||||
this.setState({
|
||||
isCustom: true,
|
||||
isCustomModalVisible: false,
|
||||
bip21encoded: bip21.encode(this.state.address, { amount: this.state.customAmount, label: this.state.customLabel }),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<BlueSpacing20 />
|
||||
<BlueButtonLink
|
||||
title="Reset"
|
||||
onPress={() => {
|
||||
this.setState({
|
||||
isCustom: false,
|
||||
isCustomModalVisible: false,
|
||||
customAmount: '',
|
||||
customLabel: '',
|
||||
bip21encoded: bip21.encode(this.state.addresss),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<BlueSpacing20 />
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
showCustomAmountModal = () => {
|
||||
this.setState({ isCustomModalVisible: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeBlueArea style={{ flex: 1 }}>
|
||||
<ScrollView contentContainerStyle={{ justifyContent: 'space-between' }}>
|
||||
<View style={{ marginTop: 32, alignItems: 'center', paddingHorizontal: 16 }}>
|
||||
{this.state.isCustom && (
|
||||
<>
|
||||
<BlueText
|
||||
style={{ color: '#0c2550', fontWeight: '600', fontSize: 36, textAlign: 'center', paddingBottom: 24 }}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{this.state.customAmount} {BitcoinUnit.BTC}
|
||||
</BlueText>
|
||||
<BlueText style={{ color: '#0c2550', fontWeight: '600', textAlign: 'center', paddingBottom: 24 }} numberOfLines={1}>
|
||||
{this.state.customLabel}
|
||||
</BlueText>
|
||||
</>
|
||||
)}
|
||||
{this.state.bip21encoded === undefined ? (
|
||||
<View style={{ alignItems: 'center', width: 300, height: 300 }}>
|
||||
<BlueLoading />
|
||||
|
|
@ -124,17 +217,10 @@ export default class ReceiveDetails extends Component {
|
|||
getRef={c => (this.qrCodeSVG = c)}
|
||||
/>
|
||||
)}
|
||||
<BlueCopyTextToClipboard text={this.state.addressText} />
|
||||
<BlueCopyTextToClipboard text={this.state.isCustom ? this.state.bip21encoded : this.state.addressText} />
|
||||
</View>
|
||||
<View style={{ alignItems: 'center', alignContent: 'flex-end', marginBottom: 24 }}>
|
||||
<BlueButtonLink
|
||||
title={loc.receive.details.setAmount}
|
||||
onPress={() => {
|
||||
this.props.navigation.navigate('ReceiveAmount', {
|
||||
address: this.state.address,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<BlueButtonLink title={loc.receive.details.setAmount} onPress={this.showCustomAmountModal} />
|
||||
<View>
|
||||
<BlueButton
|
||||
icon={{
|
||||
|
|
@ -144,12 +230,12 @@ export default class ReceiveDetails extends Component {
|
|||
}}
|
||||
onPress={async () => {
|
||||
if (this.qrCodeSVG === undefined) {
|
||||
Share.open({ message: `bitcoin:${this.state.address}` }).catch(error => console.log(error));
|
||||
Share.open({ message: this.state.bip21encoded }).catch(error => console.log(error));
|
||||
} else {
|
||||
InteractionManager.runAfterInteractions(async () => {
|
||||
this.qrCodeSVG.toDataURL(data => {
|
||||
let shareImageBase64 = {
|
||||
message: `bitcoin:${this.state.address}`,
|
||||
message: this.state.bip21encoded,
|
||||
url: `data:image/png;base64,${data}`,
|
||||
};
|
||||
Share.open(shareImageBase64).catch(error => console.log(error));
|
||||
|
|
@ -161,12 +247,31 @@ export default class ReceiveDetails extends Component {
|
|||
/>
|
||||
</View>
|
||||
</View>
|
||||
{this.renderCustomAmountModal()}
|
||||
</ScrollView>
|
||||
</SafeBlueArea>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
modalContent: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
padding: 22,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
minHeight: 350,
|
||||
height: 350,
|
||||
},
|
||||
bottomModal: {
|
||||
justifyContent: 'flex-end',
|
||||
margin: 0,
|
||||
},
|
||||
});
|
||||
|
||||
ReceiveDetails.propTypes = {
|
||||
navigation: PropTypes.shape({
|
||||
goBack: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -1,168 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { View, Share, TextInput, KeyboardAvoidingView, Dimensions, ScrollView } from 'react-native';
|
||||
import QRCode from 'react-native-qrcode-svg';
|
||||
import bip21 from 'bip21';
|
||||
import {
|
||||
SafeBlueArea,
|
||||
BlueCard,
|
||||
BlueButton,
|
||||
BlueNavigationStyle,
|
||||
BlueBitcoinAmount,
|
||||
BlueText,
|
||||
BlueCopyTextToClipboard,
|
||||
} from '../../BlueComponents';
|
||||
import PropTypes from 'prop-types';
|
||||
import Privacy from '../../Privacy';
|
||||
/** @type {AppStorage} */
|
||||
let BlueApp = require('../../BlueApp');
|
||||
let loc = require('../../loc');
|
||||
const { width } = Dimensions.get('window');
|
||||
|
||||
export default class ReceiveAmount extends Component {
|
||||
static navigationOptions = ({ navigation }) => ({
|
||||
...BlueNavigationStyle(navigation, true),
|
||||
title: loc.receive.header,
|
||||
headerLeft: null,
|
||||
});
|
||||
|
||||
static propTypes = {
|
||||
navigation: PropTypes.shape({
|
||||
state: PropTypes.shape({
|
||||
params: PropTypes.shape({
|
||||
address: PropTypes.string,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let address = props.navigation.state.params.address;
|
||||
|
||||
this.state = {
|
||||
address: address,
|
||||
addressText: address,
|
||||
amount: undefined,
|
||||
label: undefined,
|
||||
amountSet: false,
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
Privacy.enableBlur();
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
Privacy.disableBlur();
|
||||
}
|
||||
|
||||
determineSize = () => {
|
||||
if (width > 312) {
|
||||
return width - 48;
|
||||
}
|
||||
return 312;
|
||||
};
|
||||
|
||||
renderDefault() {
|
||||
return (
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
onChangeText={text => this.setState({ label: text })}
|
||||
placeholder={loc.receive.details.label}
|
||||
value={this.state.label || ''}
|
||||
numberOfLines={1}
|
||||
style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
|
||||
editable={!this.state.isLoading}
|
||||
/>
|
||||
</View>
|
||||
<BlueCard>
|
||||
<BlueButton
|
||||
title={loc.receive.details.create}
|
||||
onPress={() => {
|
||||
this.setState({
|
||||
amountSet: true,
|
||||
bip21: bip21.encode(this.state.address, { amount: this.state.amount, label: this.state.label }),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</BlueCard>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
renderWithSetAmount() {
|
||||
return (
|
||||
<View style={{ justifyContent: 'space-between' }}>
|
||||
<BlueText style={{ color: '#0c2550', fontWeight: '600', textAlign: 'center', paddingBottom: 24 }} numberOfLines={1}>
|
||||
{this.state.label}
|
||||
</BlueText>
|
||||
<View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 16 }}>
|
||||
<QRCode
|
||||
value={this.state.bip21}
|
||||
logo={require('../../img/qr-code.png')}
|
||||
size={this.determineSize()}
|
||||
logoSize={90}
|
||||
color={BlueApp.settings.foregroundColor}
|
||||
logoBackgroundColor={BlueApp.settings.brandingColor}
|
||||
ecl={'Q'}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<BlueCopyTextToClipboard text={this.state.bip21} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeBlueArea style={{ flex: 1 }}>
|
||||
<ScrollView>
|
||||
<View style={{ flex: 1, backgroundColor: '#FFFFFF', justifyContent: 'space-between' }}>
|
||||
<KeyboardAvoidingView behavior="position">
|
||||
<BlueBitcoinAmount
|
||||
amount={this.state.amount || ''}
|
||||
onChangeText={text => this.setState({ amount: text })}
|
||||
disabled={this.state.amountSet}
|
||||
/>
|
||||
{this.state.amountSet ? this.renderWithSetAmount() : this.renderDefault()}
|
||||
</KeyboardAvoidingView>
|
||||
{this.state.amountSet && (
|
||||
<BlueCard>
|
||||
<BlueButton
|
||||
icon={{
|
||||
name: 'share-alternative',
|
||||
type: 'entypo',
|
||||
color: BlueApp.settings.buttonTextColor,
|
||||
}}
|
||||
onPress={async () => {
|
||||
Share.share({
|
||||
message: this.state.bip21,
|
||||
});
|
||||
}}
|
||||
title={loc.receive.details.share}
|
||||
/>
|
||||
</BlueCard>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeBlueArea>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue