diff --git a/components/CollapsedQR.tsx b/components/CollapsedQR.tsx index 70f8f2d77..112460802 100644 --- a/components/CollapsedQR.tsx +++ b/components/CollapsedQR.tsx @@ -13,11 +13,13 @@ import QRCode from 'react-native-qrcode-svg'; import HCESession, { NFCContentType, NFCTagType4 } from 'react-native-hce'; -import Button from './../components/Button'; +import Amount from './Amount'; +import Button from './Button'; import CopyButton from './CopyButton'; import { localeString } from './../utils/LocaleUtils'; import { themeColor } from './../utils/ThemeUtils'; import Touchable from './Touchable'; +import Conversion from './Conversion'; const defaultLogo = require('../assets/images/icon-black.png'); const defaultLogoWhite = require('../assets/images/icon-white.png'); @@ -68,6 +70,8 @@ interface CollapsedQRProps { truncateLongValue?: boolean; logo?: any; nfcSupported?: boolean; + satAmount?: string | number; + displayAmount?: boolean; } interface CollapsedQRState { @@ -141,13 +145,27 @@ export default class CollapsedQR extends React.Component< expanded, textBottom, truncateLongValue, - logo + logo, + satAmount } = this.props; const { width, height } = Dimensions.get('window'); return ( + {satAmount != null && this.props.displayAmount && ( + + + + + + + )} {!hideText && !textBottom && ( navigation.navigate('QR', { - value: `lightning:${getPaymentRequest}` + value: `lightning:${getPaymentRequest}`, + satAmount: getAmount }) } > diff --git a/views/PaymentRequest.tsx b/views/PaymentRequest.tsx index 15de53382..83d08c914 100644 --- a/views/PaymentRequest.tsx +++ b/views/PaymentRequest.tsx @@ -427,7 +427,8 @@ export default class PaymentRequest extends React.Component< navigation.navigate('QR', { - value: `lightning:${paymentRequest}` + value: `lightning:${paymentRequest}`, + satAmount: requestAmount }) } > diff --git a/views/QR.tsx b/views/QR.tsx index 94aa0ab12..90c64ec6b 100644 --- a/views/QR.tsx +++ b/views/QR.tsx @@ -2,16 +2,20 @@ import * as React from 'react'; import { Dimensions, View } from 'react-native'; import { Route } from '@react-navigation/native'; import { StackNavigationProp } from '@react-navigation/stack'; +import { inject, observer } from 'mobx-react'; import CollapsedQR from '../components/CollapsedQR'; import Header from '../components/Header'; import Screen from '../components/Screen'; import Text from '../components/Text'; +import SettingsStore from '../stores/SettingsStore'; + import { themeColor } from '../utils/ThemeUtils'; interface QRProps { navigation: StackNavigationProp; + SettingsStore?: SettingsStore; route: Route< 'QR', { @@ -21,6 +25,7 @@ interface QRProps { hideText: boolean; jumboLabel: boolean; logo: any; + satAmount?: string | number; } >; } @@ -32,8 +37,11 @@ interface QRState { hideText: boolean; jumboLabel: boolean; logo: any; + satAmount?: string | number; } +@inject('SettingsStore') +@observer export default class QR extends React.PureComponent { constructor(props: QRProps) { super(props); @@ -42,6 +50,7 @@ export default class QR extends React.PureComponent { const copyValue = props.route.params?.copyValue ?? ''; const label = props.route.params?.label ?? ''; const { hideText, jumboLabel, logo } = props.route.params ?? {}; + const satAmount = props.route.params?.satAmount ?? undefined; this.state = { value, @@ -49,14 +58,22 @@ export default class QR extends React.PureComponent { label, hideText, jumboLabel, - logo + logo, + satAmount }; } render() { const { navigation } = this.props; - const { value, copyValue, label, hideText, jumboLabel, logo } = - this.state; + const { + value, + copyValue, + label, + hideText, + jumboLabel, + logo, + satAmount + } = this.state; const { fontScale } = Dimensions.get('window'); @@ -71,8 +88,7 @@ export default class QR extends React.PureComponent { /> @@ -95,6 +111,11 @@ export default class QR extends React.PureComponent { textBottom hideText={hideText} logo={logo} + satAmount={satAmount} + displayAmount={ + this.props.SettingsStore?.settings?.invoices + ?.displayAmountOnInvoice || false + } /> diff --git a/views/Receive.tsx b/views/Receive.tsx index b614ed796..05ebee6b0 100644 --- a/views/Receive.tsx +++ b/views/Receive.tsx @@ -1786,7 +1786,7 @@ export default class Receive extends React.Component< )} {haveInvoice && !creatingInvoiceError && ( - + {selectedIndex == 0 && !belowDustLimit && haveUnifiedInvoice && ( @@ -1806,6 +1806,12 @@ export default class Receive extends React.Component< : ZIcon } nfcSupported={nfcSupported} + satAmount={satAmount} + displayAmount={ + settings?.invoices + ?.displayAmountOnInvoice || + false + } /> )} {selectedIndex == 1 && @@ -1830,6 +1836,12 @@ export default class Receive extends React.Component< : LightningIcon } nfcSupported={nfcSupported} + satAmount={satAmount} + displayAmount={ + settings?.invoices + ?.displayAmountOnInvoice || + false + } /> )} {selectedIndex == 2 && @@ -1854,6 +1866,16 @@ export default class Receive extends React.Component< : OnChainIcon } nfcSupported={nfcSupported} + satAmount={ + satAmount === '0' + ? undefined + : satAmount + } + displayAmount={ + settings?.invoices + ?.displayAmountOnInvoice || + false + } /> )} @@ -1949,6 +1971,12 @@ export default class Receive extends React.Component< textBottom truncateLongValue nfcSupported={nfcSupported} + satAmount={satAmount} + displayAmount={ + settings?.invoices + ?.displayAmountOnInvoice || + false + } /> )} {!( diff --git a/views/Settings/InvoicesSettings.tsx b/views/Settings/InvoicesSettings.tsx index 80f962ff9..ebec8a856 100644 --- a/views/Settings/InvoicesSettings.tsx +++ b/views/Settings/InvoicesSettings.tsx @@ -37,6 +37,7 @@ interface InvoicesSettingsState { ampInvoice: boolean; blindedPaths: boolean; showCustomPreimageField: boolean; + displayAmountOnInvoice: boolean; } @inject('SettingsStore') @@ -54,7 +55,8 @@ export default class InvoicesSettings extends React.Component< routeHints: false, ampInvoice: false, blindedPaths: false, - showCustomPreimageField: false + showCustomPreimageField: false, + displayAmountOnInvoice: false }; async UNSAFE_componentWillMount() { @@ -72,7 +74,9 @@ export default class InvoicesSettings extends React.Component< ampInvoice: settings?.invoices?.ampInvoice || false, blindedPaths: settings?.invoices?.blindedPaths || false, showCustomPreimageField: - settings?.invoices?.showCustomPreimageField || false + settings?.invoices?.showCustomPreimageField || false, + displayAmountOnInvoice: + settings?.invoices?.displayAmountOnInvoice || false }); } @@ -98,7 +102,8 @@ export default class InvoicesSettings extends React.Component< routeHints, ampInvoice, blindedPaths, - showCustomPreimageField + showCustomPreimageField, + displayAmountOnInvoice } = this.state; const { implementation, updateSettings }: any = SettingsStore; @@ -506,6 +511,44 @@ export default class InvoicesSettings extends React.Component< /> )} + + <> + + {localeString( + 'views.Settings.Invoices.displayAmountOnInvoice' + )} + {} + + { + this.setState({ + displayAmountOnInvoice: + !displayAmountOnInvoice + }); + await updateSettings({ + invoices: { + addressType, + memo, + expiry, + timePeriod, + expirySeconds, + routeHints, + ampInvoice, + showCustomPreimageField, + displayAmountOnInvoice: + !displayAmountOnInvoice + } + }); + }} + /> +