REF: LNDViewAdditionalInvoiceInformation to TSX

ios/Podfile.lock

@@ -1,6 +1,6 @@
 PODS:
   - boost (1.84.0)
-  - BugsnagReactNative (8.1.1):
+  - BugsnagReactNative (8.1.2):
     - React-Core
   - BVLinearGradient (2.8.3):
     - React-Core
@@ -2138,7 +2138,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 4cb898d0bf20404aab1850c656dcea009429d6c1
-  BugsnagReactNative: c8b6afecdf4dc127246de7ebef082bc71d96ac51
+  BugsnagReactNative: d1d736effdbbf529126bc39a3a9ca23e305426dd
   BVLinearGradient: 880f91a7854faff2df62518f0281afb1c60d49a3
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5

navigation/DetailViewScreensStack.tsx

@@ -7,7 +7,7 @@ import navigationStyle, { CloseButtonPosition } from '../components/navigationSt
 import { useTheme } from '../components/themes';
 import { useExtendedNavigation } from '../hooks/useExtendedNavigation';
 import loc from '../loc';
-import LNDViewAdditionalInvoiceInformation from '../screen/lnd/lndViewAdditionalInvoiceInformation';
+import LNDViewAdditionalInvoiceInformation from '../screen/lnd/LNDViewAdditionalInvoiceInformation';
 import LNDViewAdditionalInvoicePreImage from '../screen/lnd/lndViewAdditionalInvoicePreImage';
 import LNDViewInvoice from '../screen/lnd/lndViewInvoice';
 import LnurlAuth from '../screen/lnd/lnurlAuth';

navigation/LazyLoadLNDCreateInvoiceStack.tsx

@@ -5,7 +5,7 @@ import { LazyLoadingIndicator } from './LazyLoadingIndicator';
 const LNDCreateInvoice = lazy(() => import('../screen/lnd/lndCreateInvoice'));
 const SelectWallet = lazy(() => import('../screen/wallets/SelectWallet'));
 const LNDViewInvoice = lazy(() => import('../screen/lnd/lndViewInvoice'));
-const LNDViewAdditionalInvoiceInformation = lazy(() => import('../screen/lnd/lndViewAdditionalInvoiceInformation'));
+const LNDViewAdditionalInvoiceInformation = lazy(() => import('../screen/lnd/LNDViewAdditionalInvoiceInformation'));
 const LNDViewAdditionalInvoicePreImage = lazy(() => import('../screen/lnd/lndViewAdditionalInvoicePreImage'));
 
 export const LNDCreateInvoiceComponent = () => (

screen/lnd/LNDViewAdditionalInvoiceInformation.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react';
+import { useRoute, RouteProp } from '@react-navigation/native';
+import { Share, StyleSheet, View } from 'react-native';
+import { BlueLoading, BlueSpacing20, BlueText } from '../../BlueComponents';
+import presentAlert from '../../components/Alert';
+import Button from '../../components/Button';
+import CopyTextToClipboard from '../../components/CopyTextToClipboard';
+import QRCodeComponent from '../../components/QRCodeComponent';
+import SafeArea from '../../components/SafeArea';
+import { useTheme } from '../../components/themes';
+import loc from '../../loc';
+import { useStorage } from '../../hooks/context/useStorage';
+import { LightningCustodianWallet } from '../../class';
+import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
+
+type RouteParams = {
+  params: {
+    walletID: string;
+  };
+};
+
+const LNDViewAdditionalInvoiceInformation: React.FC = () => {
+  const { walletID } = useRoute<RouteProp<RouteParams>>().params;
+  const { wallets } = useStorage();
+  const wallet = wallets.find(w => w.getID() === walletID) as LightningCustodianWallet;
+  const [walletInfo, setWalletInfo] = useState<{ uris?: string[] } | undefined>();
+  const { colors } = useTheme();
+  const { goBack } = useExtendedNavigation();
+  const stylesHook = StyleSheet.create({
+    root: {
+      backgroundColor: colors.elevated,
+    },
+  });
+
+  useEffect(() => {
+    if (wallet) {
+      wallet
+        .fetchInfo()
+        .then(() => {
+          const info = wallet.info_raw;
+          if (info && info.uris && info.uris[0]) {
+            setWalletInfo(info);
+          } else {
+            presentAlert({ message: loc.errors.network });
+            goBack();
+          }
+        })
+        .catch(error => {
+          console.error(error);
+          presentAlert({ title: loc.errors.network, message: error.message });
+          goBack();
+        });
+    }
+  }, [wallet, goBack]);
+
+  return (
+    <SafeArea style={[styles.loading, stylesHook.root]}>
+      {!walletInfo ? (
+        <BlueLoading />
+      ) : (
+        <View style={styles.wrapper}>
+          <View style={styles.qrcode}>
+            <QRCodeComponent value={walletInfo.uris![0]} size={300} />
+          </View>
+          <BlueSpacing20 />
+          <BlueText>{loc.lndViewInvoice.open_direct_channel}</BlueText>
+          <CopyTextToClipboard text={walletInfo.uris![0]} />
+          <View style={styles.share}>
+            <Button
+              icon={{
+                name: 'share-alternative',
+                type: 'entypo',
+                color: colors.buttonTextColor,
+              }}
+              onPress={async () => {
+                Share.share({
+                  message: walletInfo.uris![0],
+                });
+              }}
+              title={loc.receive.details_share}
+            />
+          </View>
+        </View>
+      )}
+    </SafeArea>
+  );
+};
+
+const styles = StyleSheet.create({
+  loading: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  qrcode: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  share: {
+    marginBottom: 25,
+  },
+});
+
+export default LNDViewAdditionalInvoiceInformation;

screen/lnd/lndViewAdditionalInvoiceInformation.js

@@ -1,103 +0,0 @@
-import { useNavigation, useRoute } from '@react-navigation/native';
-import React, { useEffect, useState } from 'react';
-import { Share, StyleSheet, View } from 'react-native';
-import { BlueLoading, BlueSpacing20, BlueText } from '../../BlueComponents';
-import presentAlert from '../../components/Alert';
-import Button from '../../components/Button';
-import CopyTextToClipboard from '../../components/CopyTextToClipboard';
-import QRCodeComponent from '../../components/QRCodeComponent';
-import SafeArea from '../../components/SafeArea';
-import { useTheme } from '../../components/themes';
-import loc from '../../loc';
-import { useStorage } from '../../hooks/context/useStorage';
-
-const LNDViewAdditionalInvoiceInformation = () => {
-  const { walletID } = useRoute().params;
-  const { wallets } = useStorage();
-  const wallet = wallets.find(w => w.getID() === walletID);
-  const [walletInfo, setWalletInfo] = useState();
-  const { colors } = useTheme();
-  const { goBack } = useNavigation();
-  const stylesHook = StyleSheet.create({
-    loading: {
-      backgroundColor: colors.elevated,
-    },
-    root: {
-      backgroundColor: colors.elevated,
-    },
-  });
-
-  useEffect(() => {
-    if (wallet) {
-      wallet
-        .fetchInfo()
-        .then(_ => {
-          setWalletInfo(wallet.info_raw);
-        })
-        .catch(error => {
-          console.log(error);
-          presentAlert({ message: loc.errors.network });
-          goBack();
-        });
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [wallet]);
-
-  if (walletInfo === undefined) {
-    return (
-      <SafeArea style={[styles.loading, stylesHook.loading]}>
-        <BlueLoading />
-      </SafeArea>
-    );
-  }
-
-  return (
-    <SafeArea style={stylesHook.root}>
-      <View style={styles.wrapper}>
-        <View style={styles.qrcode}>
-          <QRCodeComponent value={walletInfo.uris[0]} size={300} />
-        </View>
-        <BlueSpacing20 />
-        <BlueText>{loc.lndViewInvoice.open_direct_channel}</BlueText>
-        <CopyTextToClipboard text={walletInfo.uris[0]} />
-        <View style={styles.share}>
-          <Button
-            icon={{
-              name: 'share-alternative',
-              type: 'entypo',
-              color: colors.buttonTextColor,
-            }}
-            onPress={async () => {
-              Share.share({
-                message: walletInfo.uris[0],
-              });
-            }}
-            title={loc.receive.details_share}
-          />
-        </View>
-      </View>
-    </SafeArea>
-  );
-};
-
-const styles = StyleSheet.create({
-  loading: {
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  wrapper: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  qrcode: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  share: {
-    marginBottom: 25,
-  },
-});
-
-export default LNDViewAdditionalInvoiceInformation;