(android) Add basic UI to attach a payer note to a payment

Author: dpad85

phoenix-android/src/main/kotlin/fr/acinq/phoenix/android/payments/offer/SendOfferView.kt

@@ -16,12 +16,22 @@
 
 package fr.acinq.phoenix.android.payments.offer
 
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.text.selection.SelectionContainer
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -33,7 +43,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
@@ -46,10 +56,12 @@ import fr.acinq.phoenix.android.business
 import fr.acinq.phoenix.android.components.AmountHeroInput
 import fr.acinq.phoenix.android.components.AmountWithFiatRowView
 import fr.acinq.phoenix.android.components.BackButtonWithBalance
+import fr.acinq.phoenix.android.components.Clickable
 import fr.acinq.phoenix.android.components.FilledButton
 import fr.acinq.phoenix.android.components.ProgressView
 import fr.acinq.phoenix.android.components.SplashLabelRow
 import fr.acinq.phoenix.android.components.SplashLayout
+import fr.acinq.phoenix.android.components.TextInput
 import fr.acinq.phoenix.android.components.contact.ContactOrOfferView
 import fr.acinq.phoenix.android.components.feedback.ErrorMessage
 import fr.acinq.phoenix.android.payments.details.translatePaymentError
@@ -67,7 +79,7 @@ fun SendOfferView(
     val balance = business.balanceManager.balance.collectAsState(null).value
     val prefBitcoinUnit = LocalBitcoinUnit.current
 
-    val vm = viewModel<SendOfferViewModel>(factory = SendOfferViewModel.Factory(business.peerManager))
+    val vm = viewModel<SendOfferViewModel>(factory = SendOfferViewModel.Factory(business.peerManager, business.nodeParamsManager))
     val requestedAmount = offer.amount
     var amount by remember { mutableStateOf(requestedAmount) }
     val amountErrorMessage: String = remember(amount) {
@@ -90,6 +102,9 @@ fun SendOfferView(
     }
     val isOverpaymentEnabled by userPrefs.getIsOverpaymentEnabled.collectAsState(initial = false)
 
+    var message by remember { mutableStateOf("") }
+    var showMessageDialog by remember { mutableStateOf(false) }
+
     SplashLayout(
         header = { BackButtonWithBalance(onBackClick = onBackClick, balance = balance) },
         topContent = {
@@ -112,10 +127,27 @@ fun SendOfferView(
             Spacer(modifier = Modifier.height(8.dp))
         }
 
-        SplashLabelRow(label = stringResource(id = R.string.send_destination_label)) {
+        SplashLabelRow(label = stringResource(id = R.string.send_destination_label), icon = R.drawable.ic_zap) {
             ContactOrOfferView(offer = offer)
         }
 
+        Spacer(modifier = Modifier.height(8.dp))
+        SplashLabelRow(label = stringResource(id = R.string.send_offer_payer_note_label), icon = R.drawable.ic_message_circle) {
+            Clickable(
+                onClick = { showMessageDialog = true },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .offset(x = (-8).dp),
+                shape = RoundedCornerShape(12.dp)
+            ) {
+                Column(modifier = Modifier.padding(8.dp)) {
+                    message.takeIf { it.isNotBlank() }?.let {
+                        Text(text = it)
+                    } ?: Text(text = stringResource(id = R.string.send_offer_payer_note_placeholder), style = MaterialTheme.typography.caption)
+                }
+            }
+        }
+
         Spacer(modifier = Modifier.height(8.dp))
         SplashLabelRow(label = stringResource(id = R.string.send_trampoline_fee_label)) {
             val amt = amount
@@ -134,10 +166,14 @@ fun SendOfferView(
             offer = offer,
             amount = amount,
             isAmountInError = amountErrorMessage.isNotBlank(),
-            onSendClick = { amount, offer -> vm.sendOffer(amount, offer) },
+            onSendClick = { amount, offer -> vm.sendOffer(amount, message, offer) },
             onPaymentSent = onPaymentSent,
         )
     }
+
+    if (showMessageDialog) {
+        PayerNoteInput(initialMessage = message, onMessageChange = { message = it }, onDismiss = { showMessageDialog = false })
+    }
 }
 
 @Composable
@@ -158,6 +194,7 @@ private fun SendOfferStateButton(
                         is OfferState.Complete.Failed.CouldNotGetInvoice -> stringResource(id = R.string.send_offer_failure_timeout)
                         is OfferState.Complete.Failed.PaymentNotSent -> translatePaymentError(paymentFailure = state.reason)
                         is OfferState.Complete.Failed.Error -> state.throwable.message
+                        is OfferState.Complete.Failed.PayerNoteTooLong -> "The message is too long (max. 64 chars)"
                     },
                     alignment = Alignment.CenterHorizontally,
                 )
@@ -191,3 +228,43 @@ private fun SendOfferStateButton(
         }
     }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun PayerNoteInput(
+    initialMessage: String,
+    onMessageChange: (String) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+
+    ModalBottomSheet(
+        sheetState = sheetState,
+        onDismissRequest = onDismiss,
+        containerColor = MaterialTheme.colors.surface,
+        contentColor = MaterialTheme.colors.onSurface,
+        scrimColor = MaterialTheme.colors.onBackground.copy(alpha = 0.2f),
+    ) {
+        Column(
+            modifier = Modifier
+                .verticalScroll(rememberScrollState())
+                .padding(horizontal = 32.dp)
+                .sizeIn(minHeight = 400.dp, maxHeight = 600.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(text = "Attach a custom message", style = MaterialTheme.typography.h4, textAlign = TextAlign.Center)
+            Text(text = "The recipient will see this message along with the payment", style = MaterialTheme.typography.caption, textAlign = TextAlign.Center)
+            Spacer(modifier = Modifier.height(16.dp))
+            TextInput(
+                text = initialMessage,
+                staticLabel = null,
+                onTextChange = onMessageChange,
+                placeholder = { Text(text = "Enter a message" )},
+                maxChars = 64,
+                singleLine = true
+            )
+            Spacer(modifier = Modifier.height(16.dp))
+            FilledButton(text = stringResource(id = R.string.btn_ok), onClick = onDismiss, modifier = Modifier.align(Alignment.End))
+        }
+    }
+}

phoenix-android/src/main/kotlin/fr/acinq/phoenix/android/payments/offer/SendOfferViewModel.kt

@@ -30,6 +30,7 @@ import fr.acinq.lightning.io.PaymentNotSent
 import fr.acinq.lightning.io.PaymentSent
 import fr.acinq.lightning.payment.OutgoingPaymentFailure
 import fr.acinq.lightning.wire.OfferTypes
+import fr.acinq.phoenix.managers.NodeParamsManager
 import fr.acinq.phoenix.managers.PeerManager
 import kotlinx.coroutines.CoroutineExceptionHandler
 import kotlinx.coroutines.Dispatchers
@@ -46,27 +47,30 @@ sealed class OfferState {
             data class Error(val throwable: Throwable) : Failed()
             data object CouldNotGetInvoice: Failed()
             data class PaymentNotSent(val reason : OutgoingPaymentFailure): Failed()
+            data object PayerNoteTooLong: Failed()
         }
     }
 }
 
-class SendOfferViewModel(val peerManager: PeerManager) : ViewModel() {
+class SendOfferViewModel(val peerManager: PeerManager, val nodeParamsManager: NodeParamsManager) : ViewModel() {
     private val log = LoggerFactory.getLogger(this::class.java)
 
     var state by mutableStateOf<OfferState>(OfferState.Init)
 
-    fun sendOffer(amount: MilliSatoshi, offer: OfferTypes.Offer) {
+    fun sendOffer(amount: MilliSatoshi, message: String, offer: OfferTypes.Offer) {
         if (state is OfferState.FetchingInvoice) return
         state = OfferState.FetchingInvoice
         viewModelScope.launch(Dispatchers.Default + CoroutineExceptionHandler { _, e ->
             log.error("error when paying offer payment: ", e)
         }) {
             val peer = peerManager.getPeer()
-            log.info("sending amount=$amount for offer=$offer")
+            val payerNote = message.takeIf { it.isNotBlank() }
+            log.info("sending amount=$amount message=$message for offer=$offer")
             val paymentResult = peer.payOffer(
                 amount = amount,
                 offer = offer,
-                payerKey = Lightning.randomKey(), // payer-key will prove the payment was received
+                payerKey = payerNote?.let { nodeParamsManager.defaultOffer().payerKey } ?: Lightning.randomKey(),
+                payerNote = payerNote,
                 fetchInvoiceTimeout = 30.seconds,
                 // FIXME: this method should accept a trampolineFees parameter
             )
@@ -79,11 +83,12 @@ class SendOfferViewModel(val peerManager: PeerManager) : ViewModel() {
     }
 
     class Factory(
-        private val peerManager: PeerManager
+        private val peerManager: PeerManager,
+        private val nodeParamsManager: NodeParamsManager,
     ) : ViewModelProvider.Factory {
         override fun <T : ViewModel> create(modelClass: Class<T>): T {
             @Suppress("UNCHECKED_CAST")
-            return SendOfferViewModel(peerManager) as T
+            return SendOfferViewModel(peerManager, nodeParamsManager) as T
         }
     }
 }

phoenix-android/src/main/kotlin/fr/acinq/phoenix/android/payments/receive/ReceiveViewModel.kt

@@ -146,8 +146,8 @@ class ReceiveViewModel(
 
     private fun getDeterministicOffer() {
         viewModelScope.launch {
-            val offer = nodeParamsManager.defaultOffer()
-            val encoded = offer.encode()
+            val offerData = nodeParamsManager.defaultOffer()
+            val encoded = offerData.defaultOffer.encode()
             val image = BitmapHelper.generateBitmap(encoded).asImageBitmap()
             offerState = OfferState.Show(encoded, image)
         }

phoenix-android/src/main/res/values/strings.xml

@@ -167,6 +167,8 @@
     <string name="send_pay_button">Pay</string>
     <string name="send_pay_retry_button">Try again</string>
 
+    <string name="send_offer_payer_note_label">Message</string>
+    <string name="send_offer_payer_note_placeholder">Tap to attach a message…</string>
     <string name="send_offer_fetching">Fetching payment details…</string>
     <string name="send_offer_failure_title">Payment has failed</string>
     <string name="send_offer_failure_timeout">Could not retrieve payment details within a reasonable time.\n\nThe recipient may be offline or unreachable.</string>