(android) Add comment feature to lnurl-pay

ACINQ · Jul 26, 2023 · 8ec0117 · 8ec0117
1 parent 4ddfd80
commit 8ec0117
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 8 deletions.
diff --git a/phoenix-android/src/main/kotlin/fr/acinq/phoenix/android/components/SplashLayout.kt b/phoenix-android/src/main/kotlin/fr/acinq/phoenix/android/components/SplashLayout.kt
@@ -29,6 +29,7 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
@@ -115,6 +116,7 @@ fun SplashLayout(
 fun SplashLabelRow(
     label: String,
     @DrawableRes icon: Int? = null,
+    iconTint: Color = MaterialTheme.typography.subtitle1.color,
     helpMessage: String? = null,
     content: @Composable ColumnScope.() -> Unit,
 ) {
@@ -138,7 +140,7 @@ fun SplashLabelRow(
                 Spacer(modifier = Modifier.width(4.dp))
                 Image(
                     painter = painterResource(id = icon),
-                    colorFilter = ColorFilter.tint(MaterialTheme.typography.subtitle1.color),
+                    colorFilter = ColorFilter.tint(iconTint),
                     contentDescription = null,
                     modifier = Modifier
                         .size(ButtonDefaults.IconSize)

diff --git a/phoenix-android/src/main/kotlin/fr/acinq/phoenix/android/payments/LnurlPayView.kt b/phoenix-android/src/main/kotlin/fr/acinq/phoenix/android/payments/LnurlPayView.kt
@@ -17,9 +17,14 @@
 package fr.acinq.phoenix.android.payments
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -100,12 +105,49 @@ fun LnurlPayView(
             Image(bitmap = it, contentDescription = model.paymentIntent.metadata.plainText, modifier = Modifier.size(90.dp))
             Spacer(modifier = Modifier.height(16.dp))
         }
-        SplashLabelRow(label = stringResource(R.string.lnurl_pay_meta_description)) {
-            Text(text = model.paymentIntent.metadata.longDesc ?: model.paymentIntent.metadata.plainText, maxLines = 1, overflow = TextOverflow.Ellipsis)
-        }
         SplashLabelRow(label = stringResource(R.string.lnurl_pay_domain)) {
             Text(text = model.paymentIntent.callback.host, maxLines = 1, overflow = TextOverflow.Ellipsis)
         }
+        SplashLabelRow(label = stringResource(R.string.lnurl_pay_meta_description)) {
+            Text(
+                text = model.paymentIntent.metadata.longDesc ?: model.paymentIntent.metadata.plainText,
+                maxLines = 3,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+
+        var comment by remember { mutableStateOf<String?>(null) }
+        val commentLength = model.paymentIntent.maxCommentLength?.toInt()
+        if (commentLength != null && commentLength > 0) {
+            var showCommentDialog by remember { mutableStateOf(false) }
+            if (showCommentDialog) {
+                EditCommentDialog(
+                    comment = comment,
+                    maxLength = commentLength,
+                    onDismiss = { showCommentDialog = false },
+                    onCommentSubmit = {
+                        comment = it
+                        showCommentDialog = false
+                    },
+                )
+            }
+            comment?.let {
+                SplashLabelRow(label = "", icon = R.drawable.ic_message_circle, iconTint = MaterialTheme.colors.primary) {
+                    Clickable(onClick = { showCommentDialog = true }) {
+                        Text(text = it)
+                    }
+                }
+            } ?: run {
+                SplashLabelRow(label = "", icon = R.drawable.ic_message_circle, iconTint = MaterialTheme.colors.primary) {
+                    Button(
+                        text = stringResource(id = R.string.lnurl_pay_comment_add_button),
+                        onClick = { showCommentDialog = true },
+                        padding = PaddingValues(horizontal = 0.dp, vertical = 8.dp),
+                        shape = RoundedCornerShape(16.dp),
+                    )
+                }
+            }
+        }
 
         Spacer(modifier = Modifier.height(32.dp))
         when (model) {
@@ -139,7 +181,7 @@ fun LnurlPayView(
                                 paymentIntent = model.paymentIntent,
                                 amount = amt,
                                 trampolineFees = fees,
-                                comment = null,
+                                comment = comment?.takeIf { it.isNotBlank() },
                             )
                         )
                     }
@@ -152,3 +194,30 @@ fun LnurlPayView(
         }
     }
 }
+
+@Composable
+private fun EditCommentDialog(
+    comment: String?,
+    maxLength: Int,
+    onDismiss: () -> Unit,
+    onCommentSubmit: (String?) -> Unit,
+) {
+    var input by remember { mutableStateOf(comment ?: "") }
+    Dialog(onDismiss = onDismiss, buttons = {
+        Button(
+            onClick = { onCommentSubmit(input.takeIf { it.isNotBlank() }) },
+            text = stringResource(id = R.string.btn_ok)
+        )
+    }) {
+        Column(modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)) {
+            Text(text = stringResource(id = R.string.lnurl_pay_comment_instructions))
+            Spacer(modifier = Modifier.height(16.dp))
+            TextInput(
+                text = input,
+                onTextChange = { input = it },
+                maxChars = maxLength,
+                staticLabel = stringResource(id = R.string.lnurl_pay_comment_label),
+            )
+        }
+    }
+}
diff --git a/phoenix-android/src/main/res/values/strings.xml b/phoenix-android/src/main/res/values/strings.xml
@@ -513,9 +513,9 @@
 
     <string name="lnurl_pay_domain">Served by</string>
     <string name="lnurl_pay_meta_description">Payment description</string>
-    <string name="lnurl_pay_comment_title">Add optional comment</string>
-    <string name="lnurl_pay_comment_message">You can attach a comment to the payment (max %1$d characters). It will be sent to the recipient.</string>
-    <string name="lnurl_pay_comment_hint">No comment</string>
+    <string name="lnurl_pay_comment_add_button">Attach a message</string>
+    <string name="lnurl_pay_comment_label">My message</string>
+    <string name="lnurl_pay_comment_instructions">You can attach a message to the payment. This message will be sent to the recipient.</string>
     <string name="lnurl_pay_pay_button">Pay</string>
     <string name="lnurl_pay_requesting_invoice">Requesting invoice…</string>
     <string name="lnurl_pay_checking_invoice">Checking invoice…</string>