Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AddNotes: Add notes after payment #1447

Merged
merged 11 commits into from
May 30, 2023
4 changes: 4 additions & 0 deletions Navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -258,6 +259,9 @@ const AppScenes = {
},
QR: {
screen: QR
},
AddNotes: {
screen: AddNotes
}
};

Expand Down
4 changes: 4 additions & 0 deletions locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,7 @@
"views.Payment.creationDate": "Creation Date",
"views.Payment.path": "Path",
"views.Payment.paths": "Paths",
"views.Payment.notes": "Notes",
"views.PaymentRequest.title": "Lightning Invoice",
"views.PaymentRequest.error": "Error loading invoice",
"views.PaymentRequest.customAmt": "Custom Amount",
Expand Down Expand Up @@ -444,6 +445,7 @@
"views.SendingLightning.sending": "Sending Transaction",
"views.SendingLightning.success": "Transaction successfully sent",
"views.SendingLightning.paymentHash": "Payment Hash",
"views.SendingLightning.AddANote": "Add a note",
"views.SendingLightning.goToWallet": "Go to Wallet",
"views.SendingLightning.lowFeeLimitMessage": "This payment may have failed due to a low fee limit. Try again with a higher fee limit",
"views.SendingLightning.tryAgain": "Try Again",
Expand All @@ -452,6 +454,7 @@
"views.SendingOnChain.broadcasting": "Broadcasting Transaction",
"views.SendingOnChain.success": "Transaction successfully sent",
"views.SendingOnChain.txid": "TXID",
"views.SendingOnChain.AddANote": "Add a note",
"views.SendingOnChain.copyTxid": "Copy TXID to Clipboard",
"views.SendingOnChain.goToBlockExplorer": "Go to block explorer",
"views.SendingOnChain.goToWallet": "Go to Wallet",
Expand Down Expand Up @@ -556,6 +559,7 @@
"views.Transaction.numConf": "Number of Confirmations",
"views.Transaction.status": "Status",
"views.Transaction.timestamp": "Timestamp",
"views.Transaction.notes": "Notes",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wee just just use a singular definition here instead of requiring translators to translate it multiple times.

Also think it might be better as Note singular

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I thought there are different views in which we are using them so I did that, like we would have to use {localeString('views.Payment.notes')} in Transaction view

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its okay, I'll use only one definition

"views.Transaction.destAddress": "Destination Address",
"views.Transaction.destAddresses": "Destination Addresses",
"views.Activity.noActivity": "No activity yet",
Expand Down
88 changes: 88 additions & 0 deletions views/AddNotes.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import * as React from 'react';
import { View, TextInput } from 'react-native';
import EncryptedStorage from 'react-native-encrypted-storage';

import Header from '../components/Header';
import Screen from '../components/Screen';
import Button from '../components/Button';

import { themeColor } from '../utils/ThemeUtils';

interface AddNotesProps {
navigation: any;
}
interface AddNotesState {
notes?: string;
payment_hash?: string;
txid?: string;
}

export default class AddNotes extends React.Component<
AddNotesProps,
AddNotesState
> {
constructor(props: any) {
super(props);
const payment_hash: string = this.props.navigation.getParam(
'payment_hash',
null
);
const txid: string = this.props.navigation.getParam('txid', null);

this.state = {
notes: '',
payment_hash,
txid
};
}
async componentDidMount() {
const key: any = this.state.txid || this.state.payment_hash;
const storedNotes = await EncryptedStorage.getItem(key);
if (storedNotes) {
this.setState({ notes: storedNotes });
}
}

render() {
const { navigation } = this.props;
const { payment_hash, txid } = this.state;
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 }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should also have color: themeColor('text')

value={notes}
/>
</View>
<Button
onPress={async () => {
navigation.navigate('Wallet');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of navigating back to the wallet it should navigate back to the previous screen

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh I was also thinking to do it, will do it

const key: any = payment_hash || txid;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's make the key prefixed with note-

await EncryptedStorage.setItem(key, notes);
}}
containerStyle={{ position: 'absolute', bottom: 40 }}
buttonStyle={{ padding: 15 }}
title="add note"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use a locale for this string too

/>
</Screen>
);
}
}
35 changes: 33 additions & 2 deletions views/Payment.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { StyleSheet, ScrollView, View } from 'react-native';
import EncryptedStorage from 'react-native-encrypted-storage';
import { StyleSheet, ScrollView, View, TouchableOpacity } from 'react-native';
import { Icon, ListItem } from 'react-native-elements';
import { inject, observer } from 'mobx-react';

Expand All @@ -16,6 +17,8 @@ import LnurlPayStore from '../stores/LnurlPayStore';

import LnurlPayHistorical from './LnurlPay/Historical';

import EditNotes from '../assets/images/SVG/Pen.svg';

interface PaymentProps {
navigation: any;
LnurlPayStore: LnurlPayStore;
Expand All @@ -25,7 +28,8 @@ interface PaymentProps {
@observer
export default class PaymentView extends React.Component<PaymentProps> {
state = {
lnurlpaytx: null
lnurlpaytx: null,
storedNotes: ''
};

async componentDidMount() {
Expand All @@ -35,10 +39,18 @@ export default class PaymentView extends React.Component<PaymentProps> {
if (lnurlpaytx) {
this.setState({ lnurlpaytx });
}
EncryptedStorage.getItem(payment.payment_hash)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make sure you update the key format here too

.then((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 {
Expand All @@ -53,6 +65,17 @@ export default class PaymentView extends React.Component<PaymentProps> {

const lnurlpaytx = this.state.lnurlpaytx;

const EditNotesButton = () => (
<TouchableOpacity
onPress={() =>
navigation.navigate('AddNotes', { payment_hash })
}
style={{ marginTop: -12 }}
>
<EditNotes height={40} width={40} />
</TouchableOpacity>
);

return (
<Screen>
<Header
Expand All @@ -64,6 +87,7 @@ export default class PaymentView extends React.Component<PaymentProps> {
fontFamily: 'Lato-Regular'
}
}}
rightComponent={<EditNotesButton />}
navigation={navigation}
/>
<ScrollView>
Expand Down Expand Up @@ -177,6 +201,13 @@ export default class PaymentView extends React.Component<PaymentProps> {
/>
</ListItem>
)}
{storedNotes && (
<KeyValue
keyValue={localeString('views.Payment.notes')}
value={storedNotes}
sensitive
/>
)}
</View>
</ScrollView>
</Screen>
Expand Down
15 changes: 14 additions & 1 deletion views/SendingLightning.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,20 @@ export default class SendingLightning extends React.Component<
/>
</View>
)}

{!loading && !(!!error || !!payment_error) && (
<Button
title={localeString(
'views.SendingLightning.AddANote'
)}
onPress={() =>
navigation.navigate('AddNotes', {
payment_hash
})
}
secondary
buttonStyle={{ padding: 15 }}
/>
)}
<View style={styles.buttons}>
{payment_hash && !(!!error || !!payment_error) && (
<View
Expand Down
56 changes: 35 additions & 21 deletions views/SendingOnChain.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -135,27 +135,41 @@ export default class SendingOnChain extends React.Component<

<View style={styles.buttons}>
{txid && (
<Button
title={localeString(
'views.SendingOnChain.goToBlockExplorer'
)}
onPress={() =>
UrlUtils.goToBlockExplorerTXID(
txid,
testnet
)
}
containerStyle={{
width: '100%',
margin: 20
}}
secondary
icon={{
name: 'exit-to-app',
size: 25
}}
buttonStyle={{ padding: 10 }}
/>
<>
<Button
title={localeString(
'views.SendingOnChain.AddANote'
)}
onPress={() =>
navigation.navigate('AddNotes', {
txid
})
}
secondary
buttonStyle={{ padding: 14 }}
/>
<Button
title={localeString(
'views.SendingOnChain.goToBlockExplorer'
)}
onPress={() =>
UrlUtils.goToBlockExplorerTXID(
txid,
testnet
)
}
containerStyle={{
width: '100%',
margin: 20
}}
secondary
icon={{
name: 'exit-to-app',
size: 25
}}
buttonStyle={{ padding: 10 }}
/>
</>
)}

{error && (
Expand Down
37 changes: 37 additions & 0 deletions views/Transaction.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import EncryptedStorage from 'react-native-encrypted-storage';
import forEach from 'lodash/forEach';
import isNull from 'lodash/isNull';
import {
Expand All @@ -25,6 +26,8 @@ import NodeInfoStore from '../stores/NodeInfoStore';
import { localeString } from '../utils/LocaleUtils';
import { themeColor } from '../utils/ThemeUtils';

import EditNotes from '../assets/images/SVG/Pen.svg';

interface TransactionProps {
navigation: any;
NodeInfoStore: NodeInfoStore;
Expand All @@ -33,12 +36,30 @@ interface TransactionProps {
@inject('NodeInfoStore')
@observer
export default class TransactionView extends React.Component<TransactionProps> {
state = {
storedNotes: ''
};
async componentDidMount() {
const { navigation } = this.props;
const transaction: Transaction = navigation.getParam(
'transaction',
null
);
EncryptedStorage.getItem(transaction.tx)
.then((storedNotes) => {
this.setState({ storedNotes });
})
.catch((error) => {
console.error('Error retrieving notes:', error);
});
}
render() {
const { NodeInfoStore, navigation } = this.props;
const transaction: Transaction = navigation.getParam(
'transaction',
null
);
const { storedNotes } = this.state;
const { testnet } = NodeInfoStore;

const {
Expand Down Expand Up @@ -96,6 +117,14 @@ export default class TransactionView extends React.Component<TransactionProps> {
/>
)
);
const EditNotesButton = () => (
<TouchableOpacity
onPress={() => navigation.navigate('AddNotes', { txid: tx })}
style={{ marginTop: -12 }}
>
<EditNotes height={40} width={40} />
</TouchableOpacity>
);

return (
<Screen>
Expand All @@ -108,6 +137,7 @@ export default class TransactionView extends React.Component<TransactionProps> {
fontFamily: 'Lato-Regular'
}
}}
rightComponent={EditNotesButton}
navigation={navigation}
/>
<View style={styles.center}>
Expand Down Expand Up @@ -248,6 +278,13 @@ export default class TransactionView extends React.Component<TransactionProps> {
{!!destAddresses && (
<React.Fragment>{addresses}</React.Fragment>
)}
{storedNotes && (
<KeyValue
keyValue={localeString('views.Transaction.notes')}
value={storedNotes}
sensitive
/>
)}

{!isConfirmed && BackendUtils.supportsBumpFee() && (
<View style={{ marginTop: 20 }}>
Expand Down