Merge pull request #2582 from myxmaster/optionally_display_requested_…

…amount_on_invoice New invoice setting "Display requested amount on invoice"
ZeusLN · Dec 1, 2024 · b394210 · b394210
2 parents 2f1e146 + 81d05a7
commit b394210
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 15 deletions.
diff --git 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 (
             <React.Fragment>
+                {satAmount != null && this.props.displayAmount && (
+                    <View
+                        style={{
+                            flexDirection: 'column',
+                            alignItems: 'center'
+                        }}
+                    >
+                        <Amount sats={satAmount} toggleable></Amount>
+                        <View>
+                            <Conversion sats={satAmount} sensitive />
+                        </View>
+                    </View>
+                )}
                 {!hideText && !textBottom && (
                     <ValueText
                         value={value}

diff --git a/locales/en.json b/locales/en.json
@@ -764,6 +764,7 @@
     "views.Settings.Payments.feeLimitMethodExplainer": "Fee limit method will default to fixed for amounts up to 1000 sats and percentage for amounts greater than 1000 sats. You'll be able to change which method and values to use though, under the Settings section of the Payment Request view.",
     "views.Settings.Invoices.title": "Invoices settings",
     "views.Settings.Invoices.showCustomPreimageField": "Show custom preimage field",
+    "views.Settings.Invoices.displayAmountOnInvoice": "Display requested amount on invoice",
     "views.Settings.Channels.title": "Channels settings",
     "views.Settings.Channels.lsps1ShowPurchaseButton": "Show channel purchase button",
     "views.Settings.Privacy.blockExplorer": "Default Block explorer",

diff --git a/stores/SettingsStore.ts b/stores/SettingsStore.ts
@@ -89,6 +89,7 @@ interface InvoicesSettings {
     ampInvoice?: boolean;
     blindedPaths: boolean;
     showCustomPreimageField?: boolean;
+    displayAmountOnInvoice?: boolean;
 }
 
 interface ChannelsSettings {
@@ -1142,7 +1143,8 @@ export default class SettingsStore {
             routeHints: false,
             ampInvoice: false,
             blindedPaths: false,
-            showCustomPreimageField: false
+            showCustomPreimageField: false,
+            displayAmountOnInvoice: false
         },
         channels: {
             min_confs: 1,

diff --git a/views/Invoice.tsx b/views/Invoice.tsx
@@ -74,15 +74,17 @@ export default class InvoiceView extends React.Component<
             getKeysendMessage,
             is_amp,
             value,
-            getNoteKey
+            getNoteKey,
+            getAmount
         } = invoice;
         const privateInvoice = invoice.private;
 
         const QRButton = () => (
             <TouchableOpacity
                 onPress={() =>
                     navigation.navigate('QR', {
-                        value: `lightning:${getPaymentRequest}`
+                        value: `lightning:${getPaymentRequest}`,
+                        satAmount: getAmount
                     })
                 }
             >

diff --git a/views/PaymentRequest.tsx b/views/PaymentRequest.tsx
@@ -427,7 +427,8 @@ export default class PaymentRequest extends React.Component<
             <TouchableOpacity
                 onPress={() =>
                     navigation.navigate('QR', {
-                        value: `lightning:${paymentRequest}`
+                        value: `lightning:${paymentRequest}`,
+                        satAmount: requestAmount
                     })
                 }
             >

diff --git 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<any, any>;
+    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<QRProps, QRState> {
     constructor(props: QRProps) {
         super(props);
@@ -42,21 +50,30 @@ export default class QR extends React.PureComponent<QRProps, QRState> {
         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,
             copyValue,
             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<QRProps, QRState> {
                 />
                 <View
                     style={{
-                        top: 5,
-                        padding: 15,
+                        paddingHorizontal: 15,
                         alignItems: 'center'
                     }}
                 >
@@ -95,6 +111,11 @@ export default class QR extends React.PureComponent<QRProps, QRState> {
                         textBottom
                         hideText={hideText}
                         logo={logo}
+                        satAmount={satAmount}
+                        displayAmount={
+                            this.props.SettingsStore?.settings?.invoices
+                                ?.displayAmountOnInvoice || false
+                        }
                     />
                 </View>
             </Screen>

diff --git a/views/Receive.tsx b/views/Receive.tsx
@@ -1786,7 +1786,7 @@ export default class Receive extends React.Component<
                                         </TouchableOpacity>
                                     )}
                                 {haveInvoice && !creatingInvoiceError && (
-                                    <View style={{ marginTop: 10 }}>
+                                    <View>
                                         {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
@@ -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<
                             />
                         </>
                     )}
+
+                    <>
+                        <Text
+                            style={{
+                                ...styles.secondaryText,
+                                color: themeColor('secondaryText'),
+                                top: 20
+                            }}
+                        >
+                            {localeString(
+                                'views.Settings.Invoices.displayAmountOnInvoice'
+                            )}
+                            {}
+                        </Text>
+                        <Switch
+                            value={displayAmountOnInvoice}
+                            onValueChange={async () => {
+                                this.setState({
+                                    displayAmountOnInvoice:
+                                        !displayAmountOnInvoice
+                                });
+                                await updateSettings({
+                                    invoices: {
+                                        addressType,
+                                        memo,
+                                        expiry,
+                                        timePeriod,
+                                        expirySeconds,
+                                        routeHints,
+                                        ampInvoice,
+                                        showCustomPreimageField,
+                                        displayAmountOnInvoice:
+                                            !displayAmountOnInvoice
+                                    }
+                                });
+                            }}
+                        />
+                    </>
                 </View>
                 <ModalBox
                     style={{