views/Receive: add wrapped invoice explainer

Navigation.ts

@@ -84,6 +84,7 @@ import EditFee from './views/EditFee';
 import Seed from './views/Settings/Seed';
 import Sync from './views/Sync';
 import LspExplanation from './views/LspExplanation';
+import LspExplanationRouting from './views/LspExplanationRouting';
 
 const AppScenes = {
     Wallet: {
@@ -287,6 +288,9 @@ const AppScenes = {
     LspExplanation: {
         screen: LspExplanation
     },
+    LspExplanationRouting: {
+        screen: LspExplanationRouting
+    },
     EmbeddedNodeSettings: {
         screen: EmbeddedNode
     },

locales/en.json

@@ -466,6 +466,7 @@
     "views.Receive.p2trKey": "Taproot (P2TR)",
     "views.Receive.p2trDescription": "The latest, most powerful, bitcoin address type. Not widely supported.",
     "views.Receive.lspExplainer": "LSP will take the following amount as a setup fee:",
+    "views.Receive.lspExplainerRouting": "LSP will take the following amount as a routing fee:",
     "views.Send.title": "Send",
     "views.Send.lnPayment": "Lightning payment request",
     "views.Send.btcAddress": "Bitcoin address",
@@ -730,5 +731,7 @@
     "views.LspExplanation.title": "What are these fees?",
     "views.LspExplanation.text1": "Zeus is a self-custodial lightning wallet. In order to send or receive a lightning payment, you must open a lightning payment channel, which has a setup fee.",
     "views.LspExplanation.text2": "Once the channel is set up, you'll only have to pay normal network fees until your channel exhausts its capacity.",
-    "views.LspExplanation.buttonText": "Learn more about liquidity"
+    "views.LspExplanation.buttonText": "Learn more about liquidity",
+    "views.LspExplanationRouting.text1": "In order to provide you with some privacy and improve payment performance, the Lightning Service Provider (LSP) will do some heavy lifting for you with a technique called invoice wrapping. The fee is nominal; it's typically just a few satoshis.",
+    "views.LspExplanationRouting.text2": "You can turn off the LSP entirely and save on these fees by navigating to Settings > Lightning Service Provider (LSP), but you will sacfrifice these privacy and payment performance gains."
 }

views/LspExplanationRouting.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import Screen from '../components/Screen';
+import Header from '../components/Header';
+
+import { localeString } from '../utils/LocaleUtils';
+import { themeColor } from '../utils/ThemeUtils';
+
+interface LspExplanationProps {
+    navigation: any;
+}
+
+const FONT_SIZE = 18;
+
+export default class LspExplanation extends React.PureComponent<
+    LspExplanationProps,
+    {}
+> {
+    render() {
+        const { navigation } = this.props;
+        return (
+            <Screen>
+                <Header
+                    leftComponent="Back"
+                    centerComponent={{
+                        text: localeString('views.LspExplanation.title'),
+                        style: {
+                            color: themeColor('text'),
+                            fontFamily: 'Lato-Regular'
+                        }
+                    }}
+                    navigation={navigation}
+                />
+                <View style={{ margin: 20 }}>
+                    <Text
+                        style={{
+                            color: themeColor('text'),
+                            fontFamily: 'Lato-Regular',
+                            fontSize: FONT_SIZE,
+                            marginBottom: FONT_SIZE
+                        }}
+                    >
+                        {localeString('views.LspExplanationRouting.text1')}
+                    </Text>
+                    <Text
+                        style={{
+                            color: themeColor('text'),
+                            fontFamily: 'Lato-Regular',
+                            fontSize: FONT_SIZE,
+                            marginBottom: FONT_SIZE + 10
+                        }}
+                    >
+                        {localeString('views.LspExplanationRouting.text2')}
+                    </Text>
+                </View>
+            </Screen>
+        );
+    }
+}

views/Receive.tsx

@@ -1129,7 +1129,9 @@ export default class Receive extends React.Component<
                                     <TouchableOpacity
                                         onPress={() =>
                                             navigation.navigate(
-                                                'LspExplanation'
+                                                zeroConfFee > 1000
+                                                    ? 'LspExplanation'
+                                                    : 'LspExplanationRouting'
                                             )
                                         }
                                     >
@@ -1152,7 +1154,9 @@ export default class Receive extends React.Component<
                                                 }}
                                             >
                                                 {localeString(
-                                                    'views.Receive.lspExplainer'
+                                                    zeroConfFee > 1000
+                                                        ? 'views.Receive.lspExplainer'
+                                                        : 'views.Receive.lspExplainerRouting'
                                                 )}
                                             </Text>
                                             <Amount