LSPS1: Using new navigation

ZeusLN · May 20, 2024 · 0f6adf7 · 0f6adf7
1 parent 3506476
commit 0f6adf7
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 17 deletions.
diff --git a/App.tsx b/App.tsx
@@ -138,6 +138,12 @@ import LspExplanationWrappedInvoices from './views/Explanations/LspExplanationWr
 import LspExplanationOverview from './views/Explanations/LspExplanationOverview';
 import RestoreChannelBackups from './views/Settings/EmbeddedNode/RestoreChannelBackups';
 
+// LSPS1
+import LSPS1 from './views/Settings/LSPS1/index';
+import LSPS1Settings from './views/Settings/LSPS1/Settings';
+import OrdersPane from './views/Settings/LSPS1/OrdersPane';
+import Orders from './views/Settings/LSPS1/Order';
+
 import RawTxHex from './views/RawTxHex';
 
 import CustodialWalletWarning from './views/Settings/CustodialWalletWarning';
@@ -732,6 +738,22 @@ export default class App extends React.PureComponent {
                                                     name="TxHex"
                                                     component={TxHex}
                                                 />
+                                                <Stack.Screen
+                                                    name="LSPS1"
+                                                    component={LSPS1}
+                                                />
+                                                <Stack.Screen
+                                                    name="LSPS1Settings"
+                                                    component={LSPS1Settings}
+                                                />
+                                                <Stack.Screen
+                                                    name="OrdersPane"
+                                                    component={OrdersPane}
+                                                />
+                                                <Stack.Screen
+                                                    name="LSPS1Order"
+                                                    component={Orders}
+                                                />
                                             </Stack.Navigator>
                                         </NavigationContainer>
                                     )}

diff --git a/views/Channels/ChannelsPane.tsx b/views/Channels/ChannelsPane.tsx
@@ -28,8 +28,6 @@ import { localeString } from '../../utils/LocaleUtils';
 
 import Channel from '../../models/Channel';
 
-import NavigationService from '../../NavigationService';
-
 // TODO: does this belong in the model? Or can it be computed from the model?
 export enum Status {
     Good = 'Good',
@@ -46,7 +44,7 @@ interface ChannelsProps {
     SettingsStore?: SettingsStore;
 }
 
-const ColorChangingButton = () => {
+const ColorChangingButton = ({ onPress }) => {
     const [forward, setForward] = useState(true);
     const animation = useRef(new Animated.Value(0)).current;
 
@@ -75,7 +73,7 @@ const ColorChangingButton = () => {
 
     return (
         <TouchableOpacity
-            onPress={() => NavigationService.navigate('LSPS1')}
+            onPress={onPress}
             style={[styles.button, { backgroundColor }]}
         >
             <Text style={styles.buttonText}>
@@ -237,7 +235,11 @@ export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
                 {settings?.lsps1ShowPurchaseButton &&
                     (BackendUtils.supportsLSPS1customMessage() ||
                         BackendUtils.supportsLSPS1rest()) && (
-                        <ColorChangingButton />
+                        <ColorChangingButton
+                            onPress={() => {
+                                navigation.navigate('LSPS1');
+                            }}
+                        />
                     )}
                 {showSearch && <ChannelsFilter />}
                 {loading ? (

diff --git a/views/Settings/LSPS1/Order.tsx b/views/Settings/LSPS1/Order.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { View, ScrollView } from 'react-native';
 import EncryptedStorage from 'react-native-encrypted-storage';
 import { inject, observer } from 'mobx-react';
+import { Route } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import Screen from '../../../components/Screen';
 import Header from '../../../components/Header';
@@ -19,7 +21,8 @@ import NodeInfoStore from '../../../stores/NodeInfoStore';
 import LSPS1OrderResponse from '../../../components/LSPS1OrderResponse';
 
 interface OrderProps {
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
+    route: Route<'LSPS1Order', { orderId: string; orderShouldUpdate: boolean }>;
     LSPStore: LSPStore;
     SettingsStore: SettingsStore;
     InvoicesStore: InvoicesStore;
@@ -43,13 +46,10 @@ export default class Orders extends React.Component<OrderProps, OrdersState> {
     }
 
     async componentDidMount() {
-        const { LSPStore, navigation } = this.props;
+        const { LSPStore, route } = this.props;
         let temporaryOrder: any;
-        const id = navigation.getParam('orderId', null);
-        const orderShouldUpdate = navigation.getParam(
-            'orderShouldUpdate',
-            null
-        );
+        const id = route.params?.orderId;
+        const orderShouldUpdate = route.params?.orderShouldUpdate;
 
         console.log('Looking for order in storage...');
         EncryptedStorage.getItem('orderResponses')
@@ -71,7 +71,7 @@ export default class Orders extends React.Component<OrderProps, OrdersState> {
                         BackendUtils.supportsLSPS1rest()
                             ? LSPStore.getOrderREST(
                                   id,
-                                  temporaryOrder?.RESTHost
+                                  temporaryOrder?.endpoint
                               )
                             : LSPStore.getOrderCustomMessage(
                                   id,

diff --git a/views/Settings/LSPS1/OrdersPane.tsx b/views/Settings/LSPS1/OrdersPane.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import EncryptedStorage from 'react-native-encrypted-storage';
 import moment from 'moment';
 import { inject, observer } from 'mobx-react';
+import { StackNavigationProp } from '@react-navigation/stack';
 import { View, FlatList, TouchableOpacity, Text } from 'react-native';
 
 import Header from '../../../components/Header';
@@ -16,7 +17,7 @@ import LSPStore from '../../../stores/LSPStore';
 import { WarningMessage } from '../../../components/SuccessErrorMessage';
 
 interface OrdersPaneProps {
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     LSPStore: LSPStore;
 }
 
@@ -41,7 +42,7 @@ export default class OrdersPane extends React.Component<
 
     async componentDidMount() {
         const { navigation, LSPStore } = this.props;
-        navigation.addListener('didFocus', async () => {
+        navigation.addListener('focus', async () => {
             try {
                 // Retrieve saved responses from encrypted storage
                 const responseArrayString = await EncryptedStorage.getItem(

diff --git a/views/Settings/LSPS1/Settings.tsx b/views/Settings/LSPS1/Settings.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 import { FlatList, View, Text } from 'react-native';
 import { Icon, ListItem } from 'react-native-elements';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import Button from '../../../components/Button';
 import Header from '../../../components/Header';
@@ -28,7 +29,7 @@ import SettingsStore, {
 import OlympusAnimated from '../../../assets/images/SVG/OlympusAnimated.svg';
 
 interface LSPS1SettingsProps {
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     LSPStore: LSPStore;
     NodeInfoStore: NodeInfoStore;
     SettingsStore: SettingsStore;

diff --git a/views/Settings/LSPS1/index.tsx b/views/Settings/LSPS1/index.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import EncryptedStorage from 'react-native-encrypted-storage';
 import Slider from '@react-native-community/slider';
+import { StackNavigationProp } from '@react-navigation/stack';
 import { v4 as uuidv4 } from 'uuid';
 
 import CaretDown from '../../../assets/images/SVG/Caret Down.svg';
@@ -45,7 +46,7 @@ interface LSPS1Props {
     ChannelsStore: ChannelsStore;
     SettingsStore: SettingsStore;
     FiatStore: FiatStore;
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
 }
 
 interface LSPS1State {