From f57911f0f67ff39775d9f0cf3a2c89f8551e74fa Mon Sep 17 00:00:00 2001 From: Evan Kaloudis Date: Sat, 1 Apr 2023 00:17:11 -0400 Subject: [PATCH 1/2] Components: Header --- components/Header.tsx | 63 +++++++++ components/WalletHeader.tsx | 7 +- views/Accounts/Accounts.tsx | 45 ++---- views/Accounts/ImportAccount.tsx | 25 ++-- views/Activity/Activity.tsx | 19 +-- views/Activity/ActivityFilter.tsx | 35 ++--- views/BumpFee.tsx | 19 +-- views/Channels/Channel.tsx | 19 +-- views/EditFee.tsx | 21 +-- views/IntroSplash.tsx | 22 ++- views/Invoice.tsx | 32 ++--- views/LnurlAuth.tsx | 38 ++---- views/LnurlChannel.tsx | 36 ++--- views/LnurlPay/LnurlPay.tsx | 42 ++---- views/Lockscreen.tsx | 37 ++--- views/NodeInfo.tsx | 34 ++--- views/OpenChannel.tsx | 68 ++++----- views/Order.tsx | 41 ++---- views/Payment.tsx | 36 ++--- views/PaymentRequest.tsx | 9 +- views/Receive.tsx | 7 +- views/Routing/Routing.tsx | 21 +-- views/Routing/RoutingEvent.tsx | 34 ++--- views/Routing/SetFees.tsx | 18 +-- views/Send.tsx | 71 ++++------ views/Settings/About.tsx | 19 +-- views/Settings/CertInstallInstructions.tsx | 152 ++++++++++----------- views/Settings/Currency.tsx | 29 ++-- views/Settings/Display.tsx | 35 ++--- views/Settings/Gods.tsx | 33 ++--- views/Settings/Help.tsx | 27 ++-- views/Settings/InvoicesSettings.tsx | 23 +--- views/Settings/Language.tsx | 27 ++-- views/Settings/Mortals.tsx | 33 ++--- views/Settings/NodeConfiguration.tsx | 56 +++----- views/Settings/Nodes.tsx | 37 ++--- views/Settings/Olympians.tsx | 33 ++--- views/Settings/PaymentsSettings.tsx | 22 +-- views/Settings/PointOfSale.tsx | 39 ++---- views/Settings/PointOfSaleRecon.tsx | 21 +-- views/Settings/PointOfSaleReconExport.tsx | 21 +-- views/Settings/Privacy.tsx | 39 ++---- views/Settings/Security.tsx | 29 ++-- views/Settings/SetDuressPassword.tsx | 17 +-- views/Settings/SetDuressPin.tsx | 23 +--- views/Settings/SetPassword.tsx | 31 ++--- views/Settings/SetPin.tsx | 18 +-- views/Settings/Settings.tsx | 30 ++-- views/Settings/SignVerifyMessage.tsx | 39 ++---- views/Settings/Sponsors.tsx | 19 +-- views/Transaction.tsx | 18 +-- views/UTXOs/CoinControl.tsx | 19 +-- views/UTXOs/UTXO.tsx | 18 +-- 53 files changed, 593 insertions(+), 1113 deletions(-) create mode 100644 components/Header.tsx diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 000000000..462e51811 --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { Header, Icon } from 'react-native-elements'; +import { themeColor } from '../utils/ThemeUtils'; + +interface HeaderProps { + leftComponent?: 'Back' | 'Close' | JSX.Element; + centerComponent?: JSX.Element; + rightComponent?: JSX.Element; + containerStyle?: any; + placement?: 'left' | 'center' | 'right' | undefined; + navigation?: any; +} + +function ZeusHeader(props: HeaderProps) { + const BackButton = () => ( + props.navigation.goBack()} + color={themeColor('text')} + underlayColor="transparent" + /> + ); + + const CloseButton = () => ( + props.navigation.goBack()} + color={themeColor('text')} + underlayColor="transparent" + /> + ); + + const { + leftComponent, + centerComponent, + rightComponent, + containerStyle, + placement + } = props; + return ( +
+ ); +} + +export default ZeusHeader; diff --git a/components/WalletHeader.tsx b/components/WalletHeader.tsx index a9df3371a..2b38fcf0c 100644 --- a/components/WalletHeader.tsx +++ b/components/WalletHeader.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Badge, Header } from 'react-native-elements'; +import { Badge } from 'react-native-elements'; import { Image, TouchableOpacity, View } from 'react-native'; import { inject, observer } from 'mobx-react'; import Clipboard from '@react-native-clipboard/clipboard'; @@ -10,6 +10,7 @@ import NodeInfoStore from '../stores/NodeInfoStore'; import PosStore from '../stores/PosStore'; import Button from '../components/Button'; +import Header from './Header'; import LoadingIndicator from '../components/LoadingIndicator'; import NodeIdenticon from '../components/NodeIdenticon'; @@ -342,10 +343,6 @@ export default class WalletHeader extends React.Component< ) } - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} /> ); } diff --git a/views/Accounts/Accounts.tsx b/views/Accounts/Accounts.tsx index aa8881c5b..6caa61abd 100644 --- a/views/Accounts/Accounts.tsx +++ b/views/Accounts/Accounts.tsx @@ -1,20 +1,21 @@ import * as React from 'react'; -import { Header, Icon } from 'react-native-elements'; +import { Icon } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; -import Button from './../../components/Button'; -import LayerBalances from './../../components/LayerBalances'; -import LoadingIndicator from './../../components/LoadingIndicator'; -import Screen from './../../components/Screen'; +import Button from '../../components/Button'; +import Header from '../../components/Header'; +import LayerBalances from '../../components/LayerBalances'; +import LoadingIndicator from '../../components/LoadingIndicator'; +import Screen from '../../components/Screen'; -import BalanceStore from './../../stores/BalanceStore'; -import UnitsStore from './../../stores/UnitsStore'; -import UTXOsStore from './../../stores/UTXOsStore'; -import SettingsStore from './../../stores/SettingsStore'; +import BalanceStore from '../../stores/BalanceStore'; +import UnitsStore from '../../stores/UnitsStore'; +import UTXOsStore from '../../stores/UTXOsStore'; +import SettingsStore from '../../stores/SettingsStore'; -import BackendUtils from './../../utils/BackendUtils'; -import { localeString } from './../../utils/LocaleUtils'; -import { themeColor } from './../../utils/ThemeUtils'; +import BackendUtils from '../../utils/BackendUtils'; +import { localeString } from '../../utils/LocaleUtils'; +import { themeColor } from '../../utils/ThemeUtils'; interface AccountsProps { navigation: any; @@ -83,19 +84,6 @@ export default class Accounts extends React.Component< const { value, amount, lightning } = this.state; const { loadingAccounts } = UTXOsStore; - const BackButton = () => ( - - value - ? navigation.goBack() - : navigation.navigate('Settings', { refresh: true }) - } - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const AddButton = () => (
} + leftComponent="Back" centerComponent={{ text: amount ? localeString('views.Accounts.select') @@ -116,10 +104,7 @@ export default class Accounts extends React.Component< style: { color: themeColor('text') } }} rightComponent={value ? null : } - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> {loadingAccounts && } {!loadingAccounts && ( diff --git a/views/Accounts/ImportAccount.tsx b/views/Accounts/ImportAccount.tsx index 86f821057..c88fbda12 100644 --- a/views/Accounts/ImportAccount.tsx +++ b/views/Accounts/ImportAccount.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import { ScrollView, StyleSheet, Text, View } from 'react-native'; -import { Button, Header, Icon } from 'react-native-elements'; +import { Button } from 'react-native-elements'; -import TextInput from './../../components/TextInput'; -import { localeString } from './../../utils/LocaleUtils'; -import { themeColor } from './../../utils/ThemeUtils'; +import Header from '../../components/Header'; +import TextInput from '../../components/TextInput'; +import { localeString } from '../../utils/LocaleUtils'; +import { themeColor } from '../../utils/ThemeUtils'; interface ImportAccountProps { exitSetup: any; @@ -64,30 +65,20 @@ export default class ImportAccount extends React.Component< address_type } = this.state; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.ImportAccount.title'), style: { color: themeColor('text') } }} - backgroundColor="grey" + navigation={navigation} /> { const { loading, filteredActivity, getActivityAndFilter } = ActivityStore; - const CloseButton = () => ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const FilterButton = () => ( navigation.navigate('ActivityFilter')} @@ -136,7 +128,7 @@ export default class Activity extends React.Component { return (
} + leftComponent="Close" centerComponent={{ text: localeString('general.activity'), style: { @@ -145,10 +137,7 @@ export default class Activity extends React.Component { } }} rightComponent={} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> {loading ? ( diff --git a/views/Activity/ActivityFilter.tsx b/views/Activity/ActivityFilter.tsx index dd0ced0f5..db712d90e 100644 --- a/views/Activity/ActivityFilter.tsx +++ b/views/Activity/ActivityFilter.tsx @@ -1,20 +1,21 @@ import * as React from 'react'; import { FlatList, StyleSheet, Text, View } from 'react-native'; -import { Button, Header, Icon, ListItem } from 'react-native-elements'; +import { Button, Icon, ListItem } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; import { isEqual } from 'lodash'; import DatePicker from 'react-native-date-picker'; -import { localeString } from './../../utils/LocaleUtils'; -import { themeColor } from './../../utils/ThemeUtils'; +import { localeString } from '../../utils/LocaleUtils'; +import { themeColor } from '../../utils/ThemeUtils'; -import ActivityStore, { DEFAULT_FILTERS } from './../../stores/ActivityStore'; +import ActivityStore, { DEFAULT_FILTERS } from '../../stores/ActivityStore'; -import Screen from './../../components/Screen'; -import Switch from './../../components/Switch'; -import TextInput from './../../components/TextInput'; -import ZeusButton from './../../components/Button'; +import Header from '../../components/Header'; +import Screen from '../../components/Screen'; +import Switch from '../../components/Switch'; +import TextInput from '../../components/TextInput'; +import ZeusButton from '../../components/Button'; interface ActivityFilterProps { navigation: any; @@ -75,17 +76,6 @@ export default class ActivityFilter extends React.Component< endDate } = filters; - const CloseButton = () => ( - - navigation.navigate('Activity', { refresh: true }) - } - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const DateFilter = () => (
} + leftComponent="Close" centerComponent={{ text: localeString('views.ActivityFilter.title'), style: { @@ -297,10 +287,7 @@ export default class ActivityFilter extends React.Component< ) } - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const feeRateButton = () => (
} + leftComponent="Back" centerComponent={{ text: isChannel ? localeString('views.BumpFee.titleAlt') @@ -134,10 +126,7 @@ export default class BumpFee extends React.PureComponent< fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const EditFees = () => (
} + leftComponent="Back" centerComponent={centerComponent} rightComponent={} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} placement="right" + navigation={navigation} /> diff --git a/views/EditFee.tsx b/views/EditFee.tsx index 4a086ab5e..fe700230b 100644 --- a/views/EditFee.tsx +++ b/views/EditFee.tsx @@ -8,10 +8,10 @@ import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native'; -import { Icon, Header } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; import Button from '../components/Button'; +import Header from '../components/Header'; import LightningIndicator from '../components/LightningIndicator'; import Screen from '../components/Screen'; @@ -62,34 +62,25 @@ export default class EditFee extends React.Component< const displayOnly = navigation.getParam('displayOnly', null); const { recommendedFees, loading, error, getOnchainFeesviaMempool } = FeeStore; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); + const ReloadButton = () => ( getOnchainFeesviaMempool()}> ); + return (
} - rightComponent={} - containerStyle={{ - borderBottomWidth: 0 - }} + rightComponent={ReloadButton} + navigation={navigation} /> { return ( -
} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} - /> +
{ } = invoice; const privateInvoice = invoice.private; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Invoice.title'), style: { @@ -55,10 +46,7 @@ export default class InvoiceView extends React.Component { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> diff --git a/views/LnurlAuth.tsx b/views/LnurlAuth.tsx index 96cc26520..955cd483c 100644 --- a/views/LnurlAuth.tsx +++ b/views/LnurlAuth.tsx @@ -3,24 +3,24 @@ import * as React from 'react'; import ReactNativeBlobUtil from 'react-native-blob-util'; import { inject, observer } from 'mobx-react'; import { Alert, StyleSheet, Text, View } from 'react-native'; -import { Header, Icon } from 'react-native-elements'; import querystring from 'querystring-es3'; import { HMAC as sha256HMAC } from 'fast-sha256'; -import Button from './../components/Button'; -import LightningIndicator from './../components/LightningIndicator'; -import Screen from './../components/Screen'; +import Button from '../components/Button'; +import Header from '../components/Header'; +import LightningIndicator from '../components/LightningIndicator'; +import Screen from '../components/Screen'; import { SuccessMessage, ErrorMessage -} from './../components/SuccessErrorMessage'; +} from '../components/SuccessErrorMessage'; -import { themeColor } from './../utils/ThemeUtils'; -import { localeString } from './../utils/LocaleUtils'; -import BackendUtils from './../utils/BackendUtils'; -import Base64Utils from './../utils/Base64Utils'; -import DropdownSetting from './../components/DropdownSetting'; -import SettingsStore, { LNDHUB_AUTH_MODES } from './../stores/SettingsStore'; +import { themeColor } from '../utils/ThemeUtils'; +import { localeString } from '../utils/LocaleUtils'; +import BackendUtils from '../utils/BackendUtils'; +import Base64Utils from '../utils/Base64Utils'; +import DropdownSetting from '../components/DropdownSetting'; +import SettingsStore, { LNDHUB_AUTH_MODES } from '../stores/SettingsStore'; const EC = require('elliptic').ec; const ec = new EC('secp256k1'); @@ -235,15 +235,6 @@ export default class LnurlAuth extends React.Component< chooseAuthMode } = this.state; - const BackButton = () => ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const LndHubAuthMode = () => (
} + leftComponent="Back" centerComponent={{ text: 'Authentication Request', style: { @@ -272,10 +263,7 @@ export default class LnurlAuth extends React.Component< fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: 'Incoming Channel', style: { @@ -202,10 +193,7 @@ export default class LnurlChannel extends React.Component< fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: 'Send', style: { @@ -224,10 +215,7 @@ export default class LnurlPay extends React.Component< fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return ( {(!!modifySecurityScreen || deletePin || deleteDuressPin) && ( -
} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} - /> +
)} {!!passphrase && ( diff --git a/views/NodeInfo.tsx b/views/NodeInfo.tsx index 31bb3bbb0..2004d05ca 100644 --- a/views/NodeInfo.tsx +++ b/views/NodeInfo.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; import { StyleSheet, ScrollView, Text } from 'react-native'; -import { Header, Icon } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; -import CollapsedQR from './../components/CollapsedQR'; -import KeyValue from './../components/KeyValue'; -import Screen from './../components/Screen'; +import CollapsedQR from '../components/CollapsedQR'; +import Header from '../components/Header'; +import KeyValue from '../components/KeyValue'; +import Screen from '../components/Screen'; -import { version } from './../package.json'; -import { localeString } from './../utils/LocaleUtils'; -import { themeColor } from './../utils/ThemeUtils'; +import { version } from '../package.json'; +import { localeString } from '../utils/LocaleUtils'; +import { themeColor } from '../utils/ThemeUtils'; -import NodeInfoStore from './../stores/NodeInfoStore'; -import SettingsStore from './../stores/SettingsStore'; +import NodeInfoStore from '../stores/NodeInfoStore'; +import SettingsStore from '../stores/SettingsStore'; interface NodeInfoProps { navigation: any; @@ -35,15 +35,6 @@ export default class NodeInfo extends React.Component { const { privacy } = settings; const lurkerMode = (privacy && privacy.lurkerMode) || false; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const URIs = (props: { uris: Array }) => { const items: any = []; @@ -130,7 +121,7 @@ export default class NodeInfo extends React.Component { return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.NodeInfo.title'), style: { @@ -138,10 +129,7 @@ export default class NodeInfo extends React.Component { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> diff --git a/views/OpenChannel.tsx b/views/OpenChannel.tsx index fa79f9bab..b3ad4550e 100644 --- a/views/OpenChannel.tsx +++ b/views/OpenChannel.tsx @@ -10,36 +10,36 @@ import { } from 'react-native'; import Clipboard from '@react-native-clipboard/clipboard'; import { inject, observer } from 'mobx-react'; -import { Header, Icon } from 'react-native-elements'; import NfcManager, { NfcEvents } from 'react-native-nfc-manager'; -import Amount from './../components/Amount'; -import Button from './../components/Button'; -import LightningIndicator from './../components/LightningIndicator'; -import Screen from './../components/Screen'; +import Amount from '../components/Amount'; +import Header from '../components/Header'; +import Button from '../components/Button'; +import LightningIndicator from '../components/LightningIndicator'; +import Screen from '../components/Screen'; import { SuccessMessage, ErrorMessage -} from './../components/SuccessErrorMessage'; -import Switch from './../components/Switch'; -import TextInput from './../components/TextInput'; -import UTXOPicker from './../components/UTXOPicker'; - -import handleAnything from './../utils/handleAnything'; -import NFCUtils from './../utils/NFCUtils'; -import NodeUriUtils from './../utils/NodeUriUtils'; -import BackendUtils from './../utils/BackendUtils'; -import { localeString } from './../utils/LocaleUtils'; -import { themeColor } from './../utils/ThemeUtils'; - -import BalanceStore from './../stores/BalanceStore'; -import ChannelsStore from './../stores/ChannelsStore'; -import FiatStore from './../stores/FiatStore'; -import SettingsStore from './../stores/SettingsStore'; -import UnitsStore, { SATS_PER_BTC } from './../stores/UnitsStore'; -import UTXOsStore from './../stores/UTXOsStore'; - -import Scan from './../assets/images/SVG/Scan.svg'; +} from '../components/SuccessErrorMessage'; +import Switch from '../components/Switch'; +import TextInput from '../components/TextInput'; +import UTXOPicker from '../components/UTXOPicker'; + +import handleAnything from '../utils/handleAnything'; +import NFCUtils from '../utils/NFCUtils'; +import NodeUriUtils from '../utils/NodeUriUtils'; +import BackendUtils from '../utils/BackendUtils'; +import { localeString } from '../utils/LocaleUtils'; +import { themeColor } from '../utils/ThemeUtils'; + +import BalanceStore from '../stores/BalanceStore'; +import ChannelsStore from '../stores/ChannelsStore'; +import FiatStore from '../stores/FiatStore'; +import SettingsStore from '../stores/SettingsStore'; +import UnitsStore, { SATS_PER_BTC } from '../stores/UnitsStore'; +import UTXOsStore from '../stores/UTXOsStore'; + +import Scan from '../assets/images/SVG/Scan.svg'; interface OpenChannelProps { exitSetup: any; @@ -285,15 +285,6 @@ export default class OpenChannel extends React.Component< break; } - const BackButton = () => ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const ScanButton = () => ( navigation.navigate('NodeQRCodeScanner')} @@ -305,7 +296,7 @@ export default class OpenChannel extends React.Component< return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.OpenChannel.openChannel'), style: { @@ -313,11 +304,8 @@ export default class OpenChannel extends React.Component< fontFamily: 'Lato-Regular' } }} - rightComponent={} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + rightComponent={ScanButton} + navigation={navigation} /> { .dividedBy(SATS_PER_BTC) .toFixed(2); - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('general.order'), style: { @@ -319,10 +311,7 @@ export default class OrderView extends React.Component { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> diff --git a/views/Payment.tsx b/views/Payment.tsx index a35e3b87f..a01ab0054 100644 --- a/views/Payment.tsx +++ b/views/Payment.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; import { StyleSheet, ScrollView, View } from 'react-native'; -import { Header, Icon } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; -import Amount from './../components/Amount'; -import KeyValue from './../components/KeyValue'; -import Screen from './../components/Screen'; +import Amount from '../components/Amount'; +import Header from '../components/Header'; +import KeyValue from '../components/KeyValue'; +import Screen from '../components/Screen'; -import Payment from './../models/Payment'; -import PrivacyUtils from './../utils/PrivacyUtils'; -import { localeString } from './../utils/LocaleUtils'; -import { themeColor } from './../utils/ThemeUtils'; +import Payment from '../models/Payment'; +import PrivacyUtils from '../utils/PrivacyUtils'; +import { localeString } from '../utils/LocaleUtils'; +import { themeColor } from '../utils/ThemeUtils'; -import SettingsStore from './../stores/SettingsStore'; -import LnurlPayStore from './../stores/LnurlPayStore'; +import SettingsStore from '../stores/SettingsStore'; +import LnurlPayStore from '../stores/LnurlPayStore'; import LnurlPayHistorical from './LnurlPay/Historical'; interface PaymentProps { @@ -55,21 +55,12 @@ export default class PaymentView extends React.Component { } = payment; const date = getDisplayTime; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const lnurlpaytx = this.state.lnurlpaytx; return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Payment.title'), style: { @@ -77,10 +68,7 @@ export default class PaymentView extends React.Component { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> diff --git a/views/PaymentRequest.tsx b/views/PaymentRequest.tsx index 231f3f82d..4a7184705 100644 --- a/views/PaymentRequest.tsx +++ b/views/PaymentRequest.tsx @@ -9,9 +9,10 @@ import { TouchableOpacity } from 'react-native'; import { inject, observer } from 'mobx-react'; -import { Header, Icon } from 'react-native-elements'; +import { Icon } from 'react-native-elements'; import Amount from '../components/Amount'; +import Header from '../components/Header'; import Button from '../components/Button'; import HopPicker from '../components/HopPicker'; import KeyValue from '../components/KeyValue'; @@ -328,7 +329,7 @@ export default class PaymentRequest extends React.Component< return (
} + leftComponent={BackButton} centerComponent={{ text: localeString('views.PaymentRequest.title'), style: { @@ -336,10 +337,6 @@ export default class PaymentRequest extends React.Component< fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} /> {(loading || loadingFeeEstimate) && ( diff --git a/views/Receive.tsx b/views/Receive.tsx index e0a91a475..e00a6bed2 100644 --- a/views/Receive.tsx +++ b/views/Receive.tsx @@ -12,7 +12,7 @@ import { } from 'react-native'; import BigNumber from 'bignumber.js'; import { LNURLWithdrawParams } from 'js-lnurl'; -import { ButtonGroup, Header, Icon } from 'react-native-elements'; +import { ButtonGroup, Icon } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; import _map from 'lodash/map'; @@ -30,6 +30,7 @@ import WordLogo from '../assets/images/SVG/Word Logo.svg'; import Amount from '../components/Amount'; import Button from '../components/Button'; import CollapsedQR from '../components/CollapsedQR'; +import Header from '../components/Header'; import LoadingIndicator from '../components/LoadingIndicator'; import PaidIndicator from '../components/PaidIndicator'; import ModalBox from '../components/ModalBox'; @@ -846,10 +847,6 @@ export default class Receive extends React.Component< ) ) } - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} /> diff --git a/views/Routing/Routing.tsx b/views/Routing/Routing.tsx index f0e46be57..b7b75b62e 100644 --- a/views/Routing/Routing.tsx +++ b/views/Routing/Routing.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { FlatList, View, Text, TouchableOpacity } from 'react-native'; -import { ButtonGroup, Header, Icon } from 'react-native-elements'; +import { ButtonGroup } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; +import Header from '../../components/Header'; import { ErrorMessage } from '../../components/SuccessErrorMessage'; import { Spacer } from '../../components/layout/Spacer'; import LoadingIndicator from '../../components/LoadingIndicator'; @@ -14,7 +15,7 @@ import FeeStore from '../../stores/FeeStore'; import BackendUtils from '../../utils/BackendUtils'; import { localeString } from '../../utils/LocaleUtils'; -import { themeColor } from './../../utils/ThemeUtils'; +import { themeColor } from '../../utils/ThemeUtils'; import { RoutingListItem } from './RoutingListItem'; import { RoutingHeader } from './RoutingHeader'; @@ -98,15 +99,6 @@ export default class Routing extends React.PureComponent< })` : localeString('general.routing'); - const BackButton = () => ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const FeeBadge = ({ navigation }: { navigation: any }) => ( navigation.navigate('SetFees')}> @@ -204,16 +196,13 @@ export default class Routing extends React.PureComponent< return (
} + leftComponent="Back" centerComponent={{ text: headerString, style: { color: themeColor('text') } }} rightComponent={} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - navigation.navigate('Routing')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Routing.RoutingEvent.title'), style: { color: themeColor('text') } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> diff --git a/views/Routing/SetFees.tsx b/views/Routing/SetFees.tsx index 75ed0539f..fb765ddac 100644 --- a/views/Routing/SetFees.tsx +++ b/views/Routing/SetFees.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { View } from 'react-native'; -import { Header, Icon } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; +import Header from '../../components/Header'; import Screen from '../../components/Screen'; import SetFeesForm from '../../components/SetFeesForm'; @@ -76,19 +76,10 @@ export default class SetFees extends React.PureComponent { // CLN const channelFee = channelFees[channelPoint]; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: channel ? `${localeString( @@ -100,10 +91,7 @@ export default class SetFees extends React.PureComponent { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> { break; } - const BackButton = () => ( - navigation.navigate('Wallet')} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const paymentOptions = [localeString('views.Send.lnPayment')]; if (BackendUtils.supportsOnchainSends()) { @@ -429,7 +421,7 @@ export default class Send extends React.Component { return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Send.title'), style: { @@ -446,10 +438,7 @@ export default class Send extends React.Component { } - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ); - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const ABOUT_ITEMS = [ { label: localeString('views.Sponsors.title'), path: 'Sponsors' }, { label: localeString('general.help'), path: 'Help' } @@ -40,7 +32,7 @@ function About(props: AboutProps) { return (
} + leftComponent="Back" centerComponent={{ text: localeString('general.about'), style: { @@ -48,10 +40,7 @@ function About(props: AboutProps) { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> { render() { const { navigation } = this.props; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); return ( - -
} - centerComponent={{ - text: localeString( - 'views.Settings.CertInstallInstructions.title' - ), - style: { - color: themeColor('text'), - fontFamily: 'Lato-Regular' - } + + - - {Platform.OS === 'android' && ( - - {localeString( - 'views.Settings.CertInstallInstructions.graph1' - )} - - )} - {Platform.OS === 'ios' && ( - + > +
+ + {Platform.OS === 'android' && ( {localeString( - 'views.Settings.CertInstallInstructions.graph2' + 'views.Settings.CertInstallInstructions.graph1' )} - - {localeString( - 'views.Settings.CertInstallInstructions.graph3' - )} - - - {localeString( - 'views.Settings.CertInstallInstructions.graph4' - )} - - - )} - - {localeString( - 'views.Settings.CertInstallInstructions.graph5' )} - - - + {Platform.OS === 'ios' && ( + + + {localeString( + 'views.Settings.CertInstallInstructions.graph2' + )} + + + {localeString( + 'views.Settings.CertInstallInstructions.graph3' + )} + + + {localeString( + 'views.Settings.CertInstallInstructions.graph4' + )} + + + )} + + {localeString( + 'views.Settings.CertInstallInstructions.graph5' + )} + + + + ); } } diff --git a/views/Settings/Currency.tsx b/views/Settings/Currency.tsx index 87428a1ab..18b069d9f 100644 --- a/views/Settings/Currency.tsx +++ b/views/Settings/Currency.tsx @@ -1,15 +1,16 @@ import * as React from 'react'; import { FlatList, View } from 'react-native'; -import { Header, Icon, ListItem, SearchBar } from 'react-native-elements'; +import { Icon, ListItem, SearchBar } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; -import Screen from './../../components/Screen'; +import Screen from '../../components/Screen'; +import Header from '../../components/Header'; -import UnitsStore from './../../stores/UnitsStore'; -import SettingsStore, { CURRENCY_KEYS } from './../../stores/SettingsStore'; +import UnitsStore from '../../stores/UnitsStore'; +import SettingsStore, { CURRENCY_KEYS } from '../../stores/SettingsStore'; -import { localeString } from './../../utils/LocaleUtils'; -import { themeColor } from './../../utils/ThemeUtils'; +import { localeString } from '../../utils/LocaleUtils'; +import { themeColor } from '../../utils/ThemeUtils'; interface CurrencyProps { navigation: any; @@ -71,20 +72,11 @@ export default class Currency extends React.Component< const { selectedCurrency, search, currencies } = this.state; const { updateSettings, getSettings }: any = SettingsStore; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Settings.Currency.title'), style: { @@ -92,10 +84,7 @@ export default class Currency extends React.Component< fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - - navigation.navigate('Settings', { - refresh: true - }) - } - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Settings.Display.title'), style: { @@ -93,10 +81,7 @@ export default class Display extends React.Component< fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> { const { navigation, SettingsStore } = this.props; const { sponsorsError, gods, loading } = SettingsStore; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Gods.title'), style: { @@ -49,10 +41,7 @@ export default class Gods extends React.Component { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> {loading && } {!loading && !sponsorsError && ( diff --git a/views/Settings/Help.tsx b/views/Settings/Help.tsx index c4a7c1e40..9f75aefea 100644 --- a/views/Settings/Help.tsx +++ b/views/Settings/Help.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import { FlatList, View } from 'react-native'; -import { Header, Icon, ListItem } from 'react-native-elements'; +import { Icon, ListItem } from 'react-native-elements'; -import Screen from './../../components/Screen'; +import Header from '../../components/Header'; +import Screen from '../../components/Screen'; -import { localeString } from './../../utils/LocaleUtils'; -import { themeColor } from './../../utils/ThemeUtils'; -import UrlUtils from './../../utils/UrlUtils'; +import { localeString } from '../../utils/LocaleUtils'; +import { themeColor } from '../../utils/ThemeUtils'; +import UrlUtils from '../../utils/UrlUtils'; interface HelpProps { navigation: any; @@ -24,15 +25,6 @@ function Help(props: HelpProps) { /> ); - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const HELP_ITEMS = [ { label: localeString('views.Settings.Help.docs'), @@ -55,7 +47,7 @@ function Help(props: HelpProps) { return (
} + leftComponent="Back" centerComponent={{ text: localeString('general.help'), style: { @@ -63,10 +55,7 @@ function Help(props: HelpProps) { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - { - navigation.navigate('Settings', { - refresh: true - }); - }} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const SettingsButton = () => (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Settings.Invoices.title'), style: { @@ -148,10 +136,7 @@ export default class InvoicesSettings extends React.Component< ) } - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Settings.Language.title'), style: { color: themeColor('text') } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> { const { navigation, SettingsStore } = this.props; const { sponsorsError, mortals, loading } = SettingsStore; - const BackButton = () => ( - navigation.goBack()} - color={themeColor('text')} - underlayColor="transparent" - /> - ); - return (
} + leftComponent="Back" centerComponent={{ text: localeString('views.Mortals.title'), style: { @@ -49,10 +41,7 @@ export default class Mortals extends React.Component { fontFamily: 'Lato-Regular' } }} - backgroundColor="transparent" - containerStyle={{ - borderBottomWidth: 0 - }} + navigation={navigation} /> {loading && } {!loading && !sponsorsError && ( diff --git a/views/Settings/NodeConfiguration.tsx b/views/Settings/NodeConfiguration.tsx index 63600d8a9..0585f3088 100644 --- a/views/Settings/NodeConfiguration.tsx +++ b/views/Settings/NodeConfiguration.tsx @@ -8,35 +8,35 @@ import { TouchableOpacity } from 'react-native'; import Clipboard from '@react-native-clipboard/clipboard'; -import { Header, Icon } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; import EncryptedStorage from 'react-native-encrypted-storage'; -import { hash, STORAGE_KEY } from './../../backends/LNC/credentialStore'; - -import AddressUtils, { CUSTODIAL_LNDHUBS } from './../../utils/AddressUtils'; -import ConnectionFormatUtils from './../../utils/ConnectionFormatUtils'; -import { localeString } from './../../utils/LocaleUtils'; -import BackendUtils from './../../utils/BackendUtils'; -import { themeColor } from './../../utils/ThemeUtils'; - -import Button from './../../components/Button'; -import CollapsedQR from './../../components/CollapsedQR'; -import DropdownSetting from './../../components/DropdownSetting'; -import LoadingIndicator from './../../components/LoadingIndicator'; -import Screen from './../../components/Screen'; +import { hash, STORAGE_KEY } from '../../backends/LNC/credentialStore'; + +import AddressUtils, { CUSTODIAL_LNDHUBS } from '../../utils/AddressUtils'; +import ConnectionFormatUtils from '../../utils/ConnectionFormatUtils'; +import { localeString } from '../../utils/LocaleUtils'; +import BackendUtils from '../../utils/BackendUtils'; +import { themeColor } from '../../utils/ThemeUtils'; + +import Button from '../../components/Button'; +import CollapsedQR from '../../components/CollapsedQR'; +import DropdownSetting from '../../components/DropdownSetting'; +import Header from '../../components/Header'; +import LoadingIndicator from '../../components/LoadingIndicator'; +import Screen from '../../components/Screen'; import { SuccessMessage, ErrorMessage -} from './../../components/SuccessErrorMessage'; -import Switch from './../../components/Switch'; -import TextInput from './../../components/TextInput'; +} from '../../components/SuccessErrorMessage'; +import Switch from '../../components/Switch'; +import TextInput from '../../components/TextInput'; import SettingsStore, { INTERFACE_KEYS, LNC_MAILBOX_KEYS -} from './../../stores/SettingsStore'; +} from '../../stores/SettingsStore'; -import Scan from './../../assets/images/SVG/Scan.svg'; +import Scan from '../../assets/images/SVG/Scan.svg'; interface NodeConfigurationProps { navigation: any; @@ -466,17 +466,6 @@ export default class NodeConfiguration extends React.Component< createAccount } = SettingsStore; - const BackButton = () => ( - - navigation.navigate('Settings', { refresh: true }) - } - color={themeColor('text')} - underlayColor="transparent" - /> - ); - const CertInstallInstructions = () => (