Merge pull request #2345 from shubhamkmr04/shubham/paths-in-success-view

SendingLightning: Display payment paths after successful lightning payment
ZeusLN · Sep 4, 2024 · 3e6d565 · 3e6d565
2 parents 2195d3f + 0ea02c7
commit 3e6d565
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 27 deletions.
diff --git a/stores/PaymentsStore.ts b/stores/PaymentsStore.ts
@@ -1,3 +1,4 @@
+//PaymentStore.tsx
 import { action, observable } from 'mobx';
 import Payment from './../models/Payment';
 import SettingsStore from './SettingsStore';
@@ -31,20 +32,21 @@ export default class PaymentsStore {
     @action
     public getPayments = async () => {
         this.loading = true;
-        await BackendUtils.getPayments()
-            .then((data: any) => {
-                const payments = data.payments;
-                this.payments = payments
-                    .slice()
-                    .reverse()
-                    .map(
-                        (payment: any) =>
-                            new Payment(payment, this.channelsStore.nodes)
-                    );
-                this.loading = false;
-            })
-            .catch(() => {
-                this.resetPayments();
-            });
+        try {
+            const data = await BackendUtils.getPayments();
+            const payments = data.payments;
+            this.payments = payments
+                .slice()
+                .reverse()
+                .map(
+                    (payment: any) =>
+                        new Payment(payment, this.channelsStore.nodes)
+                );
+            this.loading = false;
+            return this.payments;
+        } catch (error) {
+            this.resetPayments();
+            throw error;
+        }
     };
 }
diff --git a/views/SendingLightning.tsx b/views/SendingLightning.tsx
@@ -18,9 +18,11 @@ import LightningLoadingPattern from '../components/LightningLoadingPattern';
 import PaidIndicator from '../components/PaidIndicator';
 import Screen from '../components/Screen';
 import SuccessAnimation from '../components/SuccessAnimation';
+import { Row } from '../components/layout/Row';
 
 import TransactionsStore from '../stores/TransactionsStore';
 import LnurlPayStore from '../stores/LnurlPayStore';
+import PaymentsStore from '../stores/PaymentsStore';
 
 import { localeString } from '../utils/LocaleUtils';
 import { themeColor } from '../utils/ThemeUtils';
@@ -34,19 +36,32 @@ interface SendingLightningProps {
     navigation: StackNavigationProp<any, any>;
     TransactionsStore: TransactionsStore;
     LnurlPayStore: LnurlPayStore;
+    PaymentsStore: PaymentsStore;
 }
 
-@inject('TransactionsStore', 'LnurlPayStore')
+interface SendingLightningState {
+    storedNotes: '';
+    wasSuccessful: boolean;
+    currentPayment: any;
+}
+
+@inject('TransactionsStore', 'LnurlPayStore', 'PaymentsStore')
 @observer
 export default class SendingLightning extends React.Component<
     SendingLightningProps,
-    {}
+    SendingLightningState
 > {
     private backPressSubscription: NativeEventSubscription;
 
-    state = {
-        storedNotes: ''
-    };
+    constructor(props: SendingLightningProps) {
+        super(props);
+        this.state = {
+            storedNotes: '',
+            currentPayment: null,
+            wasSuccessful: false
+        };
+    }
+
     componentDidMount() {
         const { TransactionsStore, navigation } = this.props;
 
@@ -72,6 +87,33 @@ export default class SendingLightning extends React.Component<
         );
     }
 
+    componentDidUpdate(_prevProps: SendingLightningProps) {
+        const { TransactionsStore } = this.props;
+        const wasSuccessful = this.successfullySent(TransactionsStore);
+
+        if (wasSuccessful && !this.state.wasSuccessful) {
+            this.fetchPayments();
+            this.setState({ wasSuccessful: true }); // Update success state
+        } else if (!wasSuccessful && this.state.wasSuccessful) {
+            this.setState({ wasSuccessful: false }); // Reset success state if needed
+        }
+    }
+
+    fetchPayments = async () => {
+        const { PaymentsStore, TransactionsStore } = this.props;
+        try {
+            const payments = await PaymentsStore.getPayments();
+            const matchingPayment = payments.find(
+                (payment: any) =>
+                    payment.payment_preimage ===
+                    TransactionsStore.payment_preimage
+            );
+            this.setState({ currentPayment: matchingPayment });
+        } catch (error) {
+            this.setState({ currentPayment: null });
+            console.error('Failed to fetch payments', error);
+        }
+    };
     private handleBackPress(): boolean {
         const { TransactionsStore, navigation } = this.props;
         if (
@@ -116,7 +158,12 @@ export default class SendingLightning extends React.Component<
             payment_error,
             isIncomplete
         } = TransactionsStore;
-        const { storedNotes } = this.state;
+        const { storedNotes, currentPayment } = this.state;
+
+        const enhancedPath = currentPayment?.enhancedPath;
+
+        const paymentPathExists =
+            enhancedPath?.length > 0 && enhancedPath[0][0];
 
         const success = this.successfullySent(TransactionsStore);
         const inTransit = this.inTransit(TransactionsStore);
@@ -341,12 +388,40 @@ export default class SendingLightning extends React.Component<
                                 )}
                         </View>
 
-                        <View
-                            style={[
-                                styles.buttons,
-                                !noteKey && { marginTop: 14 }
-                            ]}
+                        <Row
+                            align="flex-end"
+                            style={{
+                                marginLeft: paymentPathExists ? 10 : 0,
+                                marginRight: paymentPathExists ? 10 : 0,
+                                bottom: 25,
+                                alignSelf: 'center'
+                            }}
                         >
+                            {paymentPathExists && (
+                                <Button
+                                    title={`${localeString(
+                                        'views.Payment.title'
+                                    )} ${
+                                        enhancedPath?.length > 1
+                                            ? `${localeString(
+                                                  'views.Payment.paths'
+                                              )} (${enhancedPath.length})`
+                                            : localeString('views.Payment.path')
+                                    } `}
+                                    onPress={() =>
+                                        navigation.navigate('PaymentPaths', {
+                                            enhancedPath
+                                        })
+                                    }
+                                    secondary
+                                    buttonStyle={{ height: 40, width: '100%' }}
+                                    containerStyle={{
+                                        backgroundColor: 'red',
+                                        maxWidth: '45%',
+                                        margin: 10
+                                    }}
+                                />
+                            )}
                             {noteKey && !error && !payment_error && (
                                 <Button
                                     title={
@@ -364,9 +439,23 @@ export default class SendingLightning extends React.Component<
                                         })
                                     }
                                     secondary
-                                    buttonStyle={{ height: 40 }}
+                                    buttonStyle={{ height: 40, width: '100%' }}
+                                    containerStyle={{
+                                        maxWidth: paymentPathExists
+                                            ? '45%'
+                                            : '100%',
+                                        margin: 10
+                                    }}
                                 />
                             )}
+                        </Row>
+
+                        <View
+                            style={[
+                                styles.buttons,
+                                !noteKey && { marginTop: 14 }
+                            ]}
+                        >
                             {(payment_error == 'FAILURE_REASON_NO_ROUTE' ||
                                 payment_error ==
                                     localeString(