FIX: Updated RBF UI

This commit is contained in:
Marcos Rodriguez Vélez 2019-01-12 00:15:05 -05:00
parent 638d38070b
commit acbd05c635
2 changed files with 78 additions and 66 deletions

View file

@ -1,7 +1,8 @@
/** @type {AppStorage} */ /** @type {AppStorage} */
/* global alert */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextInput } from 'react-native'; import { TextInput, View, ActivtyIndicator } from 'react-native';
import { Text, FormValidationMessage } from 'react-native-elements'; import { FormValidationMessage } from 'react-native-elements';
import { import {
BlueLoading, BlueLoading,
BlueSpacing20, BlueSpacing20,
@ -147,23 +148,21 @@ export default class SendCreate extends Component {
} }
async broadcast() { async broadcast() {
console.log('broadcasting', this.state.tx); this.setState({ isLoading: true }, async () => {
let result = await this.state.fromWallet.broadcastTx(this.state.tx); console.log('broadcasting', this.state.tx);
console.log('broadcast result = ', result); let result = await this.state.fromWallet.broadcastTx(this.state.tx);
if (typeof result === 'string') { console.log('broadcast result = ', result);
result = JSON.parse(result); if (typeof result === 'string') {
} result = JSON.parse(result);
if (result && result.error) { }
this.setState({ if (result && result.error) {
broadcastErrorMessage: JSON.stringify(result.error), alert(JSON.stringify(result.error));
broadcastSuccessMessage: '', this.setState({ isLoading: false });
}); } else {
} else { alert(JSON.stringify(result.result || result.txid));
this.setState({ broadcastErrorMessage: '' }); this.props.navigation.navigate('TransactionDetails');
this.setState({ }
broadcastSuccessMessage: 'Success! TXID: ' + JSON.stringify(result.result || result.txid), });
});
}
} }
render() { render() {
@ -187,15 +186,11 @@ export default class SendCreate extends Component {
if (this.state.nonReplaceable) { if (this.state.nonReplaceable) {
return ( return (
<SafeBlueArea style={{ flex: 1, paddingTop: 20 }}> <SafeBlueArea style={{ flex: 1, paddingTop: 20 }}>
<BlueSpacing20 /> <View style={{ flex: 1, justifyContent: 'center', alignContent: 'center' }}>
<BlueSpacing20 /> <BlueText h4 style={{ textAlign: 'center' }}>
<BlueSpacing20 /> This transaction is not replaceable
<BlueSpacing20 /> </BlueText>
<BlueSpacing20 /> </View>
<BlueText h4>This transaction is not replaceable</BlueText>
<BlueButton onPress={() => this.props.navigation.goBack()} title="Back" />
</SafeBlueArea> </SafeBlueArea>
); );
} }
@ -227,13 +222,11 @@ export default class SendCreate extends Component {
<BlueText>TX size: {this.state.size} Bytes</BlueText> <BlueText>TX size: {this.state.size} Bytes</BlueText>
<BlueText>satoshiPerByte: {this.state.satoshiPerByte} Sat/B</BlueText> <BlueText>satoshiPerByte: {this.state.satoshiPerByte} Sat/B</BlueText>
</BlueCard> </BlueCard>
{this.state.isLoading ? (
<BlueButton icon={{ name: 'megaphone', type: 'octicon' }} onPress={() => this.broadcast()} title="Broadcast" /> <ActivtyIndicator />
) : (
<BlueButton icon={{ name: 'arrow-left', type: 'octicon' }} onPress={() => this.props.navigation.goBack()} title="Go back" /> <BlueButton icon={{ name: 'megaphone', type: 'octicon' }} onPress={() => this.broadcast()} title="Broadcast" />
)}
<FormValidationMessage>{this.state.broadcastErrorMessage}</FormValidationMessage>
<Text style={{ padding: 20, color: '#080' }}>{this.state.broadcastSuccessMessage}</Text>
</SafeBlueArea> </SafeBlueArea>
); );
} }
@ -242,6 +235,7 @@ export default class SendCreate extends Component {
SendCreate.propTypes = { SendCreate.propTypes = {
navigation: PropTypes.shape({ navigation: PropTypes.shape({
goBack: PropTypes.function, goBack: PropTypes.function,
navigate: PropTypes.func,
state: PropTypes.shape({ state: PropTypes.shape({
params: PropTypes.shape({ params: PropTypes.shape({
address: PropTypes.string, address: PropTypes.string,

View file

@ -1,15 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { ActivityIndicator, View } from 'react-native'; import { ActivityIndicator, View, TextInput } from 'react-native';
import { import { BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueSpacing, BlueNavigationStyle } from '../../BlueComponents';
BlueSpacing20,
BlueButton,
SafeBlueArea,
BlueCard,
BlueText,
BlueFormInput,
BlueSpacing,
BlueNavigationStyle,
} from '../../BlueComponents';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { SegwitBech32Wallet } from '../../class'; import { SegwitBech32Wallet } from '../../class';
/** @type {AppStorage} */ /** @type {AppStorage} */
@ -143,29 +134,56 @@ export default class RBF extends Component {
</BlueText> </BlueText>
<BlueSpacing20 /> <BlueSpacing20 />
<BlueFormInput <View
onChangeText={text => this.setState({ newDestinationAddress: text })} style={{
placeholder={'receiver address here'} flexDirection: 'row',
value={this.state.newDestinationAddress} borderColor: '#d2d2d2',
/> borderBottomColor: '#d2d2d2',
borderWidth: 1.0,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
minHeight: 44,
height: 44,
alignItems: 'center',
marginVertical: 8,
borderRadius: 4,
}}
>
<TextInput
onChangeText={text => this.setState({ newDestinationAddress: text })}
placeholder={'receiver address here'}
value={this.state.newDestinationAddress}
style={{ flex: 1, minHeight: 33, marginHorizontal: 8 }}
/>
</View>
<BlueFormInput <View
onChangeText={text => this.setState({ feeDelta: text })} style={{
keyboardType={'numeric'} flexDirection: 'row',
placeholder={'fee to add (in BTC)'} borderColor: '#d2d2d2',
value={this.state.feeDelta + ''} borderBottomColor: '#d2d2d2',
/> borderWidth: 1.0,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
minHeight: 44,
height: 44,
alignItems: 'center',
marginVertical: 8,
borderRadius: 4,
}}
>
<TextInput
onChangeText={text => this.setState({ feeDelta: text })}
keyboardType={'numeric'}
placeholder={'fee to add (in BTC)'}
value={this.state.feeDelta + ''}
style={{ flex: 1, minHeight: 33, marginHorizontal: 8 }}
/>
</View>
</BlueCard> </BlueCard>
<BlueSpacing />
<View style={{ flex: 1, flexDirection: 'row', paddingTop: 20 }}> <BlueButton onPress={() => this.createTransaction()} title="Create" />
<View style={{ flex: 0.33 }}>
<BlueButton onPress={() => this.props.navigation.goBack()} title="Cancel" />
</View>
<View style={{ flex: 0.33 }} />
<View style={{ flex: 0.33 }}>
<BlueButton onPress={() => this.createTransaction()} title="Create" />
</View>
</View>
</SafeBlueArea> </SafeBlueArea>
); );
} }