diff --git a/BlueComponents.js b/BlueComponents.js index bae66251..7cc04b36 100644 --- a/BlueComponents.js +++ b/BlueComponents.js @@ -146,6 +146,24 @@ export class BlueButtonLink extends Component { } } +export const BlueNavigationStyle = (navigation, withNavigationCloseButton = false) => ({ + headerStyle: { + backgroundColor: '#FFFFFF', + borderBottomWidth: 0, + }, + headerTitleStyle: { + fontWeight: '600', + color: '#0c2550', + }, + headerTintColor: '#0c2550', + headerRight: withNavigationCloseButton ? ( + navigation.goBack(null)}> + + + ) : null, + headerBackTitle: null, +}); + export const BlueCopyToClipboardButton = ({ stringToCopy }) => { return ( Clipboard.setString(stringToCopy)}> diff --git a/MainBottomTabs.js b/MainBottomTabs.js index d920088e..0abbcbd9 100644 --- a/MainBottomTabs.js +++ b/MainBottomTabs.js @@ -33,6 +33,18 @@ const WalletsStackNavigator = createStackNavigator({ screen: WalletsList, path: 'wallets', }, + WalletTransactions: { + screen: WalletTransactions, + }, + TransactionDetails: { + screen: details, + }, + RBF: { + screen: rbf, + }, + CreateRBF: { + screen: createrbf, + }, Settings: { screen: Settings, path: 'Settings', @@ -58,15 +70,6 @@ const WalletsStackNavigator = createStackNavigator({ }, }); -const SuccessTransactionStackNavigation = createStackNavigator( - { - Success: { - screen: Success, - }, - }, - { mode: 'modal', headerMode: 'none' }, -); - const CreateTransactionStackNavigator = createStackNavigator({ SendDetails: { screen: sendDetails, @@ -84,6 +87,9 @@ const CreateTransactionStackNavigator = createStackNavigator({ headerTintColor: '#0c2550', }, }, + Success: { + screen: Success, + }, }); const MainBottomTabs = createStackNavigator( @@ -95,9 +101,6 @@ const MainBottomTabs = createStackNavigator( header: null, }, }, - WalletTransactions: { - screen: WalletTransactions, - }, AddWallet: { screen: AddWallet, }, @@ -124,23 +127,6 @@ const MainBottomTabs = createStackNavigator( }, }, - TransactionDetails: { - screen: details, - }, - Success: { - screen: SuccessTransactionStackNavigation, - navigationOptions: { - header: null, - gesturesEnabled: false, - }, - }, - RBF: { - screen: rbf, - }, - CreateRBF: { - screen: createrbf, - }, - // ReceiveDetails: { diff --git a/loc/en.js b/loc/en.js index e7a11d1d..3134e273 100644 --- a/loc/en.js +++ b/loc/en.js @@ -91,7 +91,7 @@ module.exports = { conf: 'conf', }, details: { - title: 'Transaction details', + title: 'Transaction', from: 'Input', to: 'Output', copy: 'Copy', diff --git a/loc/es.js b/loc/es.js index 83067ce8..51a2b23d 100644 --- a/loc/es.js +++ b/loc/es.js @@ -91,7 +91,7 @@ module.exports = { conf: 'conf', }, details: { - title: 'Detalles de Transaccion', + title: 'Transaccion', from: 'De', to: 'A', copy: 'Copiar', diff --git a/screen/receive/details.js b/screen/receive/details.js index bdb09382..dfcbe562 100644 --- a/screen/receive/details.js +++ b/screen/receive/details.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share } from 'react-native'; import QRCode from 'react-native-qrcode'; -import { BlueLoading, SafeBlueArea, BlueButton, BlueHeaderDefaultSub, is } from '../../BlueComponents'; +import { BlueLoading, SafeBlueArea, BlueButton, BlueNavigationStyle, is } from '../../BlueComponents'; import PropTypes from 'prop-types'; /** @type {AppStorage} */ let BlueApp = require('../../BlueApp'); @@ -9,11 +9,11 @@ let loc = require('../../loc'); // let EV = require('../../events'); export default class ReceiveDetails extends Component { - static navigationOptions = { - header: ({ navigation }) => { - return navigation.goBack(null)} />; - }, - }; + static navigationOptions = ({ navigation }) => ({ + ...BlueNavigationStyle(navigation, true), + title: loc.receive.header, + headerLeft: null, + }); constructor(props) { super(props); diff --git a/screen/send/confirm.js b/screen/send/confirm.js index 48bc9cd9..c6a18c9a 100644 --- a/screen/send/confirm.js +++ b/screen/send/confirm.js @@ -2,20 +2,17 @@ import React, { Component } from 'react'; import { ActivityIndicator, TouchableOpacity, StyleSheet, View } from 'react-native'; import { Text } from 'react-native-elements'; -import { BlueButton, SafeBlueArea, BlueCard, BlueSpacing40, BlueHeaderDefaultSub } from '../../BlueComponents'; +import { BlueButton, SafeBlueArea, BlueCard, BlueSpacing40, BlueNavigationStyle } from '../../BlueComponents'; import { BitcoinUnit } from '../../models/bitcoinUnits'; import PropTypes from 'prop-types'; let loc = require('../../loc'); let EV = require('../../events'); export default class Confirm extends Component { - static navigationOptions = { - headerStyle: { - backgroundColor: '#FFFFFF', - borderBottomWidth: 0, - }, - headerTintColor: '#0c2550', - }; + static navigationOptions = () => ({ + ...BlueNavigationStyle(null, false), + title: loc.send.confirm.header, + }); constructor(props) { super(props); @@ -64,7 +61,6 @@ export default class Confirm extends Component { render() { return ( - ({ + ...BlueNavigationStyle, + title: loc.send.create.details, + }); + constructor(props) { super(props); console.log('send/create constructor'); @@ -30,7 +35,6 @@ export default class SendCreate extends Component { render() { return ( - {loc.send.create.this_is_hex} diff --git a/screen/send/details.js b/screen/send/details.js index 16f3192f..c290a212 100644 --- a/screen/send/details.js +++ b/screen/send/details.js @@ -12,7 +12,7 @@ import { Slider, } from 'react-native'; import { Text, Icon } from 'react-native-elements'; -import { BlueHeaderDefaultSub, BlueButton } from '../../BlueComponents'; +import { BlueNavigationStyle, BlueButton } from '../../BlueComponents'; import PropTypes from 'prop-types'; import Modal from 'react-native-modal'; import NetworkTransactionFees, { NetworkTransactionFee } from '../../models/networkTransactionFees'; @@ -30,11 +30,10 @@ let currency = require('../../currency'); const btcAddressRx = /^[a-zA-Z0-9]{26,35}$/; export default class SendDetails extends Component { - static navigationOptions = { - header: ({ navigation }) => { - return navigation.goBack(null)} />; - }, - }; + static navigationOptions = ({ navigation }) => ({ + ...BlueNavigationStyle(navigation, true), + title: loc.send.header, + }); constructor(props) { super(props); diff --git a/screen/send/success.js b/screen/send/success.js index 85c761cf..4beb5f93 100644 --- a/screen/send/success.js +++ b/screen/send/success.js @@ -8,20 +8,22 @@ import PropTypes from 'prop-types'; let loc = require('../../loc'); export default class Success extends Component { + static navigationOptions = { + header: null, + }; + constructor(props) { super(props); console.log('send/create constructor'); this.state = { amount: props.navigation.getParam('amount'), - address: props.navigation.getParam('address'), fee: props.navigation.getParam('fee'), }; } async componentDidMount() { console.log('send/create - componentDidMount'); - console.log('address = ', this.state.address); Haptic.notification(Haptic.NotificationTypes.Success); } @@ -82,7 +84,7 @@ export default class Success extends Component { { - this.props.navigation.getParam('dismissModal')(); + this.props.navigation.dismiss(); }} title={loc.send.success.done} style={{ maxWidth: 263, paddingHorizontal: 56 }} @@ -98,11 +100,11 @@ Success.propTypes = { goBack: PropTypes.function, getParam: PropTypes.function, navigate: PropTypes.function, + dismiss: PropTypes.function, state: PropTypes.shape({ params: PropTypes.shape({ amount: PropTypes.string, fee: PropTypes.number, - address: PropTypes.string, }), }), }), diff --git a/screen/settings/about.js b/screen/settings/about.js index 2a746ed6..e4a934df 100644 --- a/screen/settings/about.js +++ b/screen/settings/about.js @@ -9,7 +9,7 @@ import { SafeBlueArea, BlueCard, BlueText, - BlueHeaderDefaultSub, + BlueNavigationStyle, } from '../../BlueComponents'; import PropTypes from 'prop-types'; /** @type {AppStorage} */ @@ -18,13 +18,10 @@ const { width, height } = Dimensions.get('window'); let loc = require('../../loc/'); export default class About extends Component { - static navigationOptions = { - headerStyle: { - backgroundColor: '#FFFFFF', - borderBottomWidth: 0, - }, - headerTintColor: '#0c2550', - }; + static navigationOptions = () => ({ + ...BlueNavigationStyle(), + title: loc.settings.about, + }); constructor(props) { super(props); @@ -46,7 +43,6 @@ export default class About extends Component { return ( - BlueWallet is free and opensource Bitcoin wallet. Licensed MIT. diff --git a/screen/settings/encryptStorage.js b/screen/settings/encryptStorage.js index 2cbfd4f7..dd3e2532 100644 --- a/screen/settings/encryptStorage.js +++ b/screen/settings/encryptStorage.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import { FormValidationMessage } from 'react-native-elements'; -import { BlueLoading, BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub } from '../../BlueComponents'; +import { BlueLoading, BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle } from '../../BlueComponents'; import PropTypes from 'prop-types'; /** @type {AppStorage} */ let BlueApp = require('../../BlueApp'); @@ -10,13 +10,10 @@ let prompt = require('../../prompt'); let loc = require('../../loc'); export default class EncryptStorage extends Component { - static navigationOptions = { - headerStyle: { - backgroundColor: '#FFFFFF', - borderBottomWidth: 0, - }, - headerTintColor: '#0c2550', - }; + static navigationOptions = () => ({ + ...BlueNavigationStyle(), + title: loc.settings.encrypt_storage, + }); constructor(props) { super(props); @@ -40,8 +37,6 @@ export default class EncryptStorage extends Component { return ( - - {(() => { if (this.state.storageIsEncrypted) { diff --git a/screen/settings/language.js b/screen/settings/language.js index c770daf0..1b2ca18c 100644 --- a/screen/settings/language.js +++ b/screen/settings/language.js @@ -1,19 +1,16 @@ import React, { Component } from 'react'; import { Picker } from 'react-native'; -import { BlueLoading, SafeBlueArea, BlueCard, BlueHeaderDefaultSub } from '../../BlueComponents'; +import { BlueLoading, SafeBlueArea, BlueCard, BlueNavigationStyle } from '../../BlueComponents'; import PropTypes from 'prop-types'; /** @type {AppStorage} */ let BlueApp = require('../../BlueApp'); let loc = require('../../loc'); export default class Language extends Component { - static navigationOptions = { - headerStyle: { - backgroundColor: '#FFFFFF', - borderBottomWidth: 0, - }, - headerTintColor: '#0c2550', - }; + static navigationOptions = () => ({ + ...BlueNavigationStyle(), + title: loc.settings.language, + }); constructor(props) { super(props); @@ -37,8 +34,6 @@ export default class Language extends Component { return ( - - - this.props.navigation.navigate('EncryptStorage')} /> + this.props.navigation.navigate('EncryptStorage')}> + + + this.props.navigation.navigate('Language')}> + + - this.props.navigation.navigate('Language')} /> - this.props.navigation.navigate('About')} /> + this.props.navigation.navigate('About')}> + + ); diff --git a/screen/transactions/details.js b/screen/transactions/details.js index f671ef9f..61d7cbba 100644 --- a/screen/transactions/details.js +++ b/screen/transactions/details.js @@ -9,6 +9,7 @@ import { BlueLoading, BlueSpacing20, BlueCopyToClipboardButton, + BlueNavigationStyle, } from '../../BlueComponents'; import PropTypes from 'prop-types'; /** @type {AppStorage} */ @@ -37,11 +38,9 @@ function formatTime(time) { } export default class TransactionsDetails extends Component { - static navigationOptions = { - header: ({ navigation }) => { - return navigation.goBack(null)} />; - }, - }; + static navigationOptions = () => ({ + ...BlueNavigationStyle(), + }); constructor(props) { super(props); @@ -84,6 +83,7 @@ export default class TransactionsDetails extends Component { return ( + {(() => { diff --git a/screen/wallets/add.js b/screen/wallets/add.js index 16c6c980..f355e526 100644 --- a/screen/wallets/add.js +++ b/screen/wallets/add.js @@ -12,10 +12,9 @@ import { BlueButton, SafeBlueArea, BlueCard, - BlueHeaderDefaultSub, + BlueNavigationStyle, } from '../../BlueComponents'; import { RadioGroup, RadioButton } from 'react-native-flexi-radio-button'; - import PropTypes from 'prop-types'; import { HDSegwitP2SHWallet } from '../../class/hd-segwit-p2sh-wallet'; import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet'; @@ -28,11 +27,11 @@ let loc = require('../../loc'); const { width } = Dimensions.get('window'); export default class WalletsAdd extends Component { - static navigationOptions = { - header: ({ navigation }) => { - return navigation.goBack(null)} />; - }, - }; + static navigationOptions = ({ navigation }) => ({ + ...BlueNavigationStyle(navigation, true), + title: loc.wallets.add.title, + headerLeft: null, + }); constructor(props) { super(props); diff --git a/screen/wallets/details.js b/screen/wallets/details.js index e4d911d9..ba129350 100644 --- a/screen/wallets/details.js +++ b/screen/wallets/details.js @@ -9,7 +9,7 @@ import { BlueFormLabel, BlueFormInputAddress, BlueSpacing20, - BlueHeaderDefaultSub, + BlueNavigationStyle, } from '../../BlueComponents'; import PropTypes from 'prop-types'; let EV = require('../../events'); @@ -18,11 +18,11 @@ let BlueApp = require('../../BlueApp'); let loc = require('../../loc'); export default class WalletDetails extends Component { - static navigationOptions = { - header: ({ navigation }) => { - return navigation.goBack(null)} />; - }, - }; + static navigationOptions = ({ navigation }) => ({ + ...BlueNavigationStyle(navigation, true), + title: loc.wallets.details.title, + headerLeft: null, + }); constructor(props) { super(props);