feat: show lnurl-pay comment in activity detail

Author: limpbrains

e2e/lnurl.e2e.js

@@ -199,6 +199,11 @@ d('LNURL', () => {
 			.toBeVisible()
 			.withTimeout(10000);
 		await element(by.id('Close')).tap();
+		// check if comment is displayed
+		await element(by.id('WalletsScrollView')).scrollTo('bottom', NaN, 0.85);
+		await element(by.id('ActivityShort-1')).tap();
+		await expect(element(by.id('InvoiceComment'))).toHaveText('test comment');
+		await element(by.id('NavigationClose')).tap();
 
 		// test lnurl-pay, with min == max amount, no comment
 		const payRequest2 = await lnurl.generateNewUrl('payRequest', {

src/screens/Activity/ActivityDetail.tsx

@@ -81,6 +81,7 @@ import {
 	transferSelector,
 } from '../../store/reselect/wallet';
 import {
+	commentSelector,
 	slashTagsUrlSelector,
 	tagSelector,
 } from '../../store/reselect/metadata';
@@ -684,6 +685,7 @@ const LightningActivityDetail = ({
 
 	const dispatch = useAppDispatch();
 	const tags = useAppSelector((state) => tagSelector(state, id));
+	const comment = useAppSelector((state) => commentSelector(state, id));
 	const slashTagsUrl = useAppSelector((state) => {
 		return slashTagsUrlSelector(state, id);
 	});
@@ -925,6 +927,22 @@ const LightningActivityDetail = ({
 						</View>
 					) : null}
 
+					{comment ? (
+						<View style={styles.invoiceNote}>
+							<Caption13Up style={styles.sText} color="secondary">
+								{t('activity_invoice_comment')}
+							</Caption13Up>
+							<ThemedView color="white10">
+								<Canvas style={styles.zRoot}>
+									<ZigZag color={colors.background} />
+								</Canvas>
+								<View style={styles.note}>
+									<Title testID="InvoiceComment">{comment}</Title>
+								</View>
+							</ThemedView>
+						</View>
+					) : null}
+
 					<View>
 						<View style={styles.sectionContainer}>
 							{slashTagsUrl ? (

src/screens/Wallets/LNURLPay/Confirm.tsx

@@ -26,6 +26,7 @@ import {
 	settingsSelector,
 } from '../../../store/reselect/settings';
 import { addPendingPayment } from '../../../store/slices/lightning';
+import { updateMetaTxComment } from '../../../store/slices/metadata';
 import { EActivityType } from '../../../store/types/activity';
 import { AnimatedView, BottomSheetTextInput } from '../../../styles/components';
 import { Checkmark, LightningHollow } from '../../../styles/icons';
@@ -111,6 +112,15 @@ const LNURLConfirm = ({
 
 		setIsLoading(false);
 
+		if (comment) {
+			dispatch(
+				updateMetaTxComment({
+					txId: decodedInvoice.payment_hash,
+					comment,
+				}),
+			);
+		}
+
 		if (payInvoiceResponse.isErr()) {
 			const errorMessage = payInvoiceResponse.error.message;
 			if (errorMessage === 'Timed Out.') {

src/store/index.ts

@@ -32,7 +32,7 @@ const persistConfig = {
 	key: 'root',
 	storage: reduxStorage,
 	// increase version after store shape changes
-	version: 46,
+	version: 47,
 	stateReconciler: autoMergeLevel2,
 	blacklist: ['receive', 'ui'],
 	migrate: createMigrate(migrations, { debug: __ENABLE_MIGRATION_DEBUG__ }),

src/store/migrations/index.ts

@@ -45,6 +45,15 @@ const migrations = {
 			},
 		};
 	},
+	47: (state): PersistedState => {
+		return {
+			...state,
+			metadata: {
+				...state.metadata,
+				comments: {},
+			},
+		};
+	},
 };
 
 export default migrations;

src/store/reselect/metadata.ts

@@ -33,3 +33,7 @@ export const slashTagsUrlSelector = createSelector(
 		return metadata.slashTagsUrls[id];
 	},
 );
+export const commentSelector = createSelector(
+	[metadataState, (_state, txId: string): string => txId],
+	(metadata, txId): string => metadata.comments[txId] ?? '',
+);

src/store/slices/metadata.ts

@@ -7,6 +7,7 @@ export const initialMetadataState: TMetadataState = {
 	lastUsedTags: [],
 	pendingInvoices: [],
 	slashTagsUrls: {},
+	comments: {},
 };
 
 export const metadataSlice = createSlice({
@@ -26,6 +27,16 @@ export const metadataSlice = createSlice({
 				state.tags[action.payload.txId] = action.payload.tags;
 			}
 		},
+		updateMetaTxComment: (
+			state,
+			action: PayloadAction<{ txId: string; comment: string }>,
+		) => {
+			if (action.payload.comment.length === 0) {
+				delete state.comments[action.payload.txId];
+			} else {
+				state.comments[action.payload.txId] = action.payload.comment;
+			}
+		},
 		addMetaTxTag: (
 			state,
 			action: PayloadAction<{ txId: string; tag: string }>,
@@ -120,6 +131,7 @@ const { actions, reducer } = metadataSlice;
 export const {
 	updateMetadata,
 	updateMetaTxTags,
+	updateMetaTxComment,
 	addMetaTxTag,
 	deleteMetaTxTag,
 	updatePendingInvoice,

src/store/types/metadata.ts

@@ -1,6 +1,7 @@
 export type TTags = { [txId: string]: string[] };
 export type TLastUsedTags = string[];
 export type TSlashTagsUrls = { [txId: string]: string | undefined };
+export type TTxComments = { [txId: string]: string };
 
 export type TPendingInvoice = {
 	id: string; // uuid used to identify the invoice 'session'
@@ -16,4 +17,5 @@ export type TMetadataState = {
 	// Keep track of pending invoices, right now this is only used to map tags to incoming transactions
 	pendingInvoices: TPendingInvoice[];
 	slashTagsUrls: TSlashTagsUrls;
+	comments: TTxComments;
 };

src/utils/i18n/locales/en/wallet.json

@@ -506,6 +506,9 @@
 	"activity_invoice_note": {
 		"string": "Invoice note"
 	},
+	"activity_invoice_comment": {
+		"string": "Comment"
+	},
 	"activity_invoice": {
 		"string": "Invoice"
 	},