Embedded Node: add ability to to view LND logs

Navigation.ts

@@ -58,6 +58,7 @@ import EmbeddedNode from './views/Settings/EmbeddedNode';
 import DisasterRecovery from './views/Settings/EmbeddedNode/DisasterRecovery';
 import Pathfinding from './views/Settings/EmbeddedNode/Pathfinding';
 import ExpressGraphSync from './views/Settings/EmbeddedNode/ExpressGraphSync';
+import LNDLogs from './views/Settings/EmbeddedNode/LNDLogs';
 
 // Routing
 import Routing from './views/Routing/Routing';
@@ -307,6 +308,9 @@ const AppScenes = {
     ExpressGraphSync: {
         screen: ExpressGraphSync
     },
+    LNDLogs: {
+        screen: LNDLogs
+    },
     LSPSettings: {
         screen: LSP
     }

components/LogBox.tsx

@@ -0,0 +1,53 @@
+import React, { useRef, useState } from 'react';
+import { NativeScrollEvent, ScrollView, Text, ViewStyle } from 'react-native';
+import { themeColor } from '../utils/ThemeUtils';
+
+interface ILndLogBoxProps {
+    text: string;
+    style?: ViewStyle;
+    scrollLock?: boolean;
+}
+export default function LogBox(props: ILndLogBoxProps) {
+    const logScrollView = useRef<ScrollView>(null);
+    const [scrollViewAtTheEnd, setScrollViewAtTheEnd] = useState(true);
+
+    const isCloseToBottom = ({
+        layoutMeasurement,
+        contentOffset,
+        contentSize
+    }: NativeScrollEvent) => {
+        if (!props.scrollLock) {
+            return true;
+        }
+        const paddingToBottom = 170;
+        return (
+            layoutMeasurement.height + contentOffset.y >=
+            contentSize.height - paddingToBottom
+        );
+    };
+
+    return (
+        <ScrollView
+            style={props.style}
+            ref={logScrollView}
+            contentContainerStyle={{ padding: 8 }}
+            onContentSizeChange={() => {
+                if (scrollViewAtTheEnd) {
+                    logScrollView.current?.scrollToEnd();
+                }
+            }}
+            onScroll={({ nativeEvent }) => {
+                setScrollViewAtTheEnd(isCloseToBottom(nativeEvent));
+            }}
+            scrollEventThrottle={450}
+            removeClippedSubviews={true}
+        >
+            <Text
+                selectable={true}
+                style={{ fontSize: 13, color: themeColor('text') }}
+            >
+                {props.text}
+            </Text>
+        </ScrollView>
+    );
+}

lndmobile/LndMobile.d.ts

@@ -48,7 +48,7 @@ export interface ILndMobileTools {
     log(level: 'v' | 'd' | 'i' | 'w' | 'e', tag: string, msg: string): void;
     saveLogs(): Promise<string>;
     copyLndLog(network: string): Promise<boolean>;
-    tailLog(numberOfLines: number): Promise<string>;
+    tailLog(numberOfLines: number, network: string): Promise<string>;
     observeLndLogFile(network: string): Promise<boolean>;
     saveChannelsBackup(base64Backups: string): Promise<string>;
     saveChannelBackupFile(network: string): Promise<boolean>;

locales/en.json

@@ -674,6 +674,8 @@
     "views.Settings.EmbeddedNode.initiateDisasterRecoveryOlympus": "Initiate disaster recovery from Olympus",
     "views.Settings.EmbeddedNode.initiateDisasterRecoveryOlympus.subtitle1": "Manually download recovery data from the Olympus backup service and trigger a recovery.",
     "views.Settings.EmbeddedNode.initiateDisasterRecoveryOlympus.subtitle2": "Note that this will close out all your channels and recover their balances to your on-chain wallet once settled.",
+    "views.Settings.EmbeddedNode.LNDLogs.title": "LND Logs",
+    "views.Settings.EmbeddedNode.LNDLogs.copyLogs": "Copy logs to clipboard",
     "views.Settings.LSP.enableLSP": "Enable Lightning Service Provider (LSP)",
     "views.Settings.LSP.enableLSP.subtitle": "The LSP will get you connected to the Lightning network by opening up payment channels for you.",
     "views.Settings.LSP.lspAccessKey": "LSP Access Key (if needed)",

views/Settings/EmbeddedNode/LNDLogs.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { NativeModules, View } from 'react-native';
+import { inject, observer } from 'mobx-react';
+
+import CopyButton from '../../../components/CopyButton';
+import Screen from '../../../components/Screen';
+import Header from '../../../components/Header';
+import LogBox from '../../../components/LogBox';
+
+import SettingsStore from '../../../stores/SettingsStore';
+
+import { localeString } from '../../../utils/LocaleUtils';
+import { themeColor } from '../../../utils/ThemeUtils';
+import { LndMobileToolsEventEmitter } from '../../../utils/EventListenerUtils';
+
+interface LNDLogsProps {
+    navigation: any;
+    SettingsStore: SettingsStore;
+}
+
+interface LNDLogsState {
+    log: string;
+}
+
+@inject('SettingsStore')
+@observer
+export default class LNDLogs extends React.Component<
+    LNDLogsProps,
+    LNDLogsState
+> {
+    state = {
+        log: ''
+    };
+
+    UNSAFE_componentWillMount(): void {
+        const { SettingsStore } = this.props;
+        const { embeddedLndNetwork } = SettingsStore;
+        (async () => {
+            const network =
+                embeddedLndNetwork === 'Testnet' ? 'testnet' : 'mainnet';
+            const tailLog = await NativeModules.LndMobileTools.tailLog(
+                100,
+                network
+            );
+            let log = tailLog
+                .split('\n')
+                .map((row) => row.slice(11))
+                .join('\n');
+
+            LndMobileToolsEventEmitter.addListener('lndlog', (data: string) => {
+                log = log + data.slice(11);
+                this.setState({
+                    log
+                });
+            });
+
+            NativeModules.LndMobileTools.observeLndLogFile(network);
+            this.setState({
+                log
+            });
+        })();
+    }
+
+    render() {
+        const { navigation } = this.props;
+        const { log } = this.state;
+
+        return (
+            <Screen>
+                <View style={{ flex: 1 }}>
+                    <Header
+                        leftComponent="Back"
+                        centerComponent={{
+                            text: localeString(
+                                'views.Settings.EmbeddedNode.LNDLogs.title'
+                            ),
+                            style: {
+                                color: themeColor('text'),
+                                fontFamily: 'Lato-Regular'
+                            }
+                        }}
+                        navigation={navigation}
+                    />
+                    <LogBox text={log} scrollLock={false} />
+                    <CopyButton
+                        title={localeString(
+                            'views.Settings.EmbeddedNode.LNDLogs.copyLogs'
+                        )}
+                        copyValue={log}
+                    />
+                </View>
+            </Screen>
+        );
+    }
+}

views/Settings/EmbeddedNode/index.tsx

@@ -197,6 +197,29 @@ export default class EmbeddedNode extends React.Component<
                                 color={themeColor('secondaryText')}
                             />
                         </ListItem>
+                        <ListItem
+                            containerStyle={{
+                                backgroundColor: 'transparent'
+                            }}
+                            onPress={() => navigation.navigate('LNDLogs')}
+                        >
+                            <ListItem.Content>
+                                <ListItem.Title
+                                    style={{
+                                        color: themeColor('text'),
+                                        fontFamily: 'Lato-Regular'
+                                    }}
+                                >
+                                    {localeString(
+                                        'views.Settings.EmbeddedNode.LNDLogs.title'
+                                    )}
+                                </ListItem.Title>
+                            </ListItem.Content>
+                            <Icon
+                                name="keyboard-arrow-right"
+                                color={themeColor('secondaryText')}
+                            />
+                        </ListItem>
                         <>
                             <ListItem
                                 containerStyle={{