AddNotes: Add notes after payment

ZeusLN · Apr 25, 2023 · 3cb9562 · 3cb9562
1 parent 6f0e456
commit 3cb9562
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 2 deletions.
diff --git a/Navigation.ts b/Navigation.ts
@@ -66,6 +66,7 @@ import ImportAccount from './views/Accounts/ImportAccount';
 import ImportAccountQRScanner from './views/Accounts/ImportAccountQRScanner';
 import BumpFee from './views/BumpFee';
 import QR from './views/QR';
+import AddNotes from './views/AddNotes';
 
 // POS
 import Order from './views/Order';
@@ -258,6 +259,9 @@ const AppScenes = {
     },
     QR: {
         screen: QR
+    },
+    AddNotes: {
+        screen: AddNotes
     }
 };
 

diff --git a/views/AddNotes.tsx b/views/AddNotes.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import EncryptedStorage from 'react-native-encrypted-storage';
+import { View, TextInput } from 'react-native';
+import TransactionsStore from '../stores/TransactionsStore';
+import { inject, observer } from 'mobx-react';
+
+import Header from '../components/Header';
+import Screen from '../components/Screen';
+import Button from '../components/Button';
+
+import { themeColor } from '../utils/ThemeUtils';
+
+interface AddNotesProps {
+    navigation: any;
+    TransactionsStore: TransactionsStore;
+}
+interface AddNotesState {
+    notes?: string;
+}
+
+@inject('TransactionsStore')
+@observer
+export default class AddNotes extends React.Component<
+    AddNotesProps,
+    AddNotesState
+> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            notes: ''
+        };
+    }
+
+    render() {
+        const { navigation, TransactionsStore } = this.props;
+        const { payment_hash } = TransactionsStore;
+        const { notes } = this.state;
+        return (
+            <Screen>
+                <Header
+                    leftComponent="Back"
+                    centerComponent={{
+                        text: 'Add a note',
+                        style: {
+                            color: themeColor('text'),
+                            fontFamily: 'Lato-Regular',
+                            fontSize: 20
+                        }
+                    }}
+                    navigation={navigation}
+                />
+                <View style={{ padding: 20 }}>
+                    <TextInput
+                        onChangeText={(text: string) => {
+                            this.setState({ notes: text });
+                        }}
+                        multiline
+                        numberOfLines={0}
+                        style={{ fontSize: 20 }}
+                    />
+                </View>
+                <Button
+                    onPress={async () => {
+                        navigation.navigate('SendingLightning');
+                        await EncryptedStorage.setItem(payment_hash, notes);
+                    }}
+                    containerStyle={{ position: 'absolute', bottom: 40 }}
+                    buttonStyle={{ padding: 15 }}
+                    title="add note"
+                />
+            </Screen>
+        );
+    }
+}
diff --git a/views/Payment.tsx b/views/Payment.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import EncryptedStorage from 'react-native-encrypted-storage';
 import { StyleSheet, ScrollView, View } from 'react-native';
 import { Icon, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
@@ -25,7 +26,8 @@ interface PaymentProps {
 @observer
 export default class PaymentView extends React.Component<PaymentProps> {
     state = {
-        lnurlpaytx: null
+        lnurlpaytx: null,
+        storedNotes: ''
     };
 
     async componentDidMount() {
@@ -35,10 +37,19 @@ export default class PaymentView extends React.Component<PaymentProps> {
         if (lnurlpaytx) {
             this.setState({ lnurlpaytx });
         }
+        EncryptedStorage.getItem(payment.payment_hash)
+            .then((storedNotes) => {
+                console.log('Stored notes:', storedNotes);
+                this.setState({ storedNotes });
+            })
+            .catch((error) => {
+                console.error('Error retrieving notes:', error);
+            });
     }
 
     render() {
         const { navigation } = this.props;
+        const { storedNotes } = this.state;
 
         const payment: Payment = navigation.getParam('payment', null);
         const {
@@ -177,6 +188,13 @@ export default class PaymentView extends React.Component<PaymentProps> {
                                 />
                             </ListItem>
                         )}
+                        {storedNotes && (
+                            <KeyValue
+                                keyValue="Notes"
+                                value={storedNotes}
+                                sensitive
+                            />
+                        )}
                     </View>
                 </ScrollView>
             </Screen>

diff --git a/views/SendingLightning.tsx b/views/SendingLightning.tsx
@@ -189,7 +189,14 @@ export default class SendingLightning extends React.Component<
                                 />
                             </View>
                         )}
-
+                        {!loading && !(!!error || !!payment_error) && (
+                            <Button
+                                title="Add a note"
+                                onPress={() => navigation.navigate('AddNotes')}
+                                secondary
+                                buttonStyle={{ padding: 15 }}
+                            />
+                        )}
                         <View style={styles.buttons}>
                             {payment_hash && !(!!error || !!payment_error) && (
                                 <View