senddialog same design as receivedialog

This commit is contained in:
callebtc
2025-07-15 02:53:05 +02:00
parent f01cb686fc
commit 112abc0df5
2 changed files with 513 additions and 264 deletions
@@ -14,6 +14,7 @@ import androidx.compose.runtime.*
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalClipboardManager
import androidx.compose.ui.text.AnnotatedString
@@ -23,18 +24,16 @@ import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.bitchat.android.wallet.data.MeltQuote
import com.bitchat.android.wallet.viewmodel.WalletViewModel
/**
* Send dialog with options for Cashu tokens or Lightning payments
* Full-screen send view with options for Cashu tokens or Lightning payments
*/
@Composable
fun SendDialog(
fun SendView(
viewModel: WalletViewModel,
onDismiss: () -> Unit
onNavigateBack: () -> Unit
) {
val sendType by viewModel.sendType.observeAsState(WalletViewModel.SendType.CASHU)
val generatedToken by viewModel.generatedToken.observeAsState()
@@ -42,74 +41,120 @@ fun SendDialog(
val isLoading by viewModel.isLoading.observeAsState(false)
val balance by viewModel.balance.observeAsState(0L)
Dialog(
onDismissRequest = onDismiss,
properties = DialogProperties(usePlatformDefaultWidth = false)
) {
Card(
// Determine if we should show type selector
val showTypeSelector = generatedToken == null && currentMeltQuote == null
Box(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF1A1A1A))
.fillMaxSize()
.background(Color.Black)
) {
Column(
modifier = Modifier
.padding(24.dp)
.fillMaxSize()
.padding(16.dp)
.verticalScroll(rememberScrollState())
) {
// Header
// Header with back button
Row(
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 24.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
IconButton(
onClick = onNavigateBack,
modifier = Modifier
.size(48.dp)
.clip(RoundedCornerShape(12.dp))
.background(Color(0xFF1A1A1A))
) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Back",
tint = Color.White,
modifier = Modifier.size(24.dp)
)
}
Text(
text = "SEND",
color = Color.White,
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace,
letterSpacing = 2.sp
)
// Spacer to center the title
Spacer(modifier = Modifier.width(48.dp))
}
// Balance display
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF1A1A1A))
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = "Send",
text = "AVAILABLE BALANCE",
color = Color.Gray,
fontSize = 14.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
Text(
text = formatSats(balance),
color = Color.White,
fontSize = 20.sp,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace
)
IconButton(onClick = onDismiss) {
Icon(
imageVector = Icons.Filled.Close,
contentDescription = "Close",
tint = Color.Gray
)
}
}
Spacer(modifier = Modifier.height(16.dp))
// Balance display
Text(
text = "Available: ${formatSats(balance)}",
color = Color.Gray,
fontSize = 14.sp,
fontFamily = FontFamily.Monospace
)
Spacer(modifier = Modifier.height(16.dp))
// Send type selector
// Send type selector (only show when not displaying generated token or quote)
if (showTypeSelector) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 24.dp),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF1A1A1A))
) {
Row(
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
FilterChip(
onClick = { viewModel.setSendType(WalletViewModel.SendType.CASHU) },
label = {
Text(
text = "Cashu",
fontFamily = FontFamily.Monospace
text = "Cashu Token",
fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Medium
)
},
selected = sendType == WalletViewModel.SendType.CASHU,
colors = FilterChipDefaults.filterChipColors(
selectedContainerColor = Color(0xFF00C851),
selectedLabelColor = Color.Black
selectedLabelColor = Color.Black,
containerColor = Color(0xFF2A2A2A),
labelColor = Color.White
),
modifier = Modifier.weight(1f)
)
@@ -118,20 +163,23 @@ fun SendDialog(
onClick = { viewModel.setSendType(WalletViewModel.SendType.LIGHTNING) },
label = {
Text(
text = "Lightning",
fontFamily = FontFamily.Monospace
text = "Lightning Payment",
fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Medium
)
},
selected = sendType == WalletViewModel.SendType.LIGHTNING,
colors = FilterChipDefaults.filterChipColors(
selectedContainerColor = Color(0xFF00C851),
selectedLabelColor = Color.Black
selectedLabelColor = Color.Black,
containerColor = Color(0xFF2A2A2A),
labelColor = Color.White
),
modifier = Modifier.weight(1f)
)
}
Spacer(modifier = Modifier.height(24.dp))
}
}
// Content based on send type
when (sendType) {
@@ -154,7 +202,6 @@ fun SendDialog(
}
}
}
}
}
@Composable
@@ -170,20 +217,48 @@ private fun CashuSendContent(
if (generatedToken != null) {
// Show generated token
Column {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
// Token info card
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 32.dp),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF1A1A1A))
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Icon(
imageVector = Icons.Filled.Toll,
contentDescription = "Token",
tint = Color(0xFF00C851),
modifier = Modifier.size(48.dp)
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Cashu Token Generated",
text = "CASHU TOKEN CREATED",
color = Color(0xFF00C851),
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
Spacer(modifier = Modifier.height(12.dp))
Spacer(modifier = Modifier.height(24.dp))
// Token display
Card(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(8.dp),
shape = RoundedCornerShape(12.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF2A2A2A))
) {
SelectionContainer {
@@ -192,40 +267,54 @@ private fun CashuSendContent(
color = Color.White,
fontSize = 12.sp,
fontFamily = FontFamily.Monospace,
modifier = Modifier.padding(16.dp)
modifier = Modifier.padding(16.dp),
textAlign = TextAlign.Center
)
}
}
}
}
Spacer(modifier = Modifier.height(16.dp))
// Copy button
Button(
onClick = {
clipboardManager.setText(AnnotatedString(generatedToken))
},
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF00C851)
),
shape = RoundedCornerShape(8.dp)
shape = RoundedCornerShape(16.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Filled.ContentCopy,
contentDescription = "Copy",
tint = Color.Black
tint = Color.Black,
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Spacer(modifier = Modifier.width(12.dp))
Text(
text = "Copy Token",
text = "COPY TOKEN",
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
}
}
}
} else {
// Show input form
Column {
Column(
modifier = Modifier.fillMaxWidth()
) {
// Amount input
OutlinedTextField(
value = amount,
onValueChange = { amount = it },
@@ -239,14 +328,18 @@ private fun CashuSendContent(
colors = OutlinedTextFieldDefaults.colors(
focusedBorderColor = Color(0xFF00C851),
focusedLabelColor = Color(0xFF00C851),
unfocusedBorderColor = Color(0xFF2A2A2A),
unfocusedLabelColor = Color.Gray,
unfocusedTextColor = Color.White,
focusedTextColor = Color.White
),
modifier = Modifier.fillMaxWidth()
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp),
shape = RoundedCornerShape(16.dp)
)
Spacer(modifier = Modifier.height(16.dp))
// Memo input
OutlinedTextField(
value = memo,
onValueChange = { memo = it },
@@ -259,14 +352,18 @@ private fun CashuSendContent(
colors = OutlinedTextFieldDefaults.colors(
focusedBorderColor = Color(0xFF00C851),
focusedLabelColor = Color(0xFF00C851),
unfocusedBorderColor = Color(0xFF2A2A2A),
unfocusedLabelColor = Color.Gray,
unfocusedTextColor = Color.White,
focusedTextColor = Color.White
),
modifier = Modifier.fillMaxWidth()
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 32.dp),
shape = RoundedCornerShape(16.dp)
)
Spacer(modifier = Modifier.height(24.dp))
// Create token button
Button(
onClick = {
amount.toLongOrNull()?.let { amountSats ->
@@ -274,34 +371,44 @@ private fun CashuSendContent(
}
},
enabled = !isLoading && amount.toLongOrNull()?.let { it > 0 && it <= maxAmount } == true,
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF00C851)
containerColor = Color(0xFF00C851),
disabledContainerColor = Color(0xFF2A2A2A)
),
shape = RoundedCornerShape(8.dp)
shape = RoundedCornerShape(16.dp)
) {
if (isLoading) {
CircularProgressIndicator(
color = Color.Black,
modifier = Modifier.size(16.dp)
modifier = Modifier.size(24.dp)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Filled.Send,
imageVector = Icons.Filled.Toll,
contentDescription = "Create Token",
tint = Color.Black
tint = Color.Black,
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Spacer(modifier = Modifier.width(12.dp))
Text(
text = "Create Token",
text = "CREATE TOKEN",
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
}
}
}
}
}
}
@Composable
@@ -312,23 +419,52 @@ private fun LightningSendContent(
maxAmount: Long
) {
var invoice by remember { mutableStateOf("") }
val clipboardManager = LocalClipboardManager.current
if (currentMeltQuote != null) {
// Show quote and pay button
Column {
Text(
text = "Lightning Invoice Quote",
color = Color(0xFF00C851),
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
// Quote info card
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 32.dp),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF1A1A1A))
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Icon(
imageVector = Icons.Filled.FlashOn,
contentDescription = "Lightning",
tint = Color(0xFFFFB000),
modifier = Modifier.size(48.dp)
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "LIGHTNING PAYMENT QUOTE",
color = Color(0xFFFFB000),
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
Spacer(modifier = Modifier.height(24.dp))
// Quote details
Card(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(8.dp),
shape = RoundedCornerShape(12.dp),
colors = CardDefaults.cardColors(containerColor = Color(0xFF2A2A2A))
) {
Column(modifier = Modifier.padding(16.dp)) {
@@ -339,16 +475,20 @@ private fun LightningSendContent(
Text(
text = "Amount:",
color = Color.Gray,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
fontSize = 14.sp
)
Text(
text = formatSats(currentMeltQuote.amount.toLong()),
color = Color.White,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
fontSize = 14.sp,
fontWeight = FontWeight.Bold
)
}
if (currentMeltQuote.feeReserve.toLong() > 0) {
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
@@ -356,16 +496,21 @@ private fun LightningSendContent(
Text(
text = "Fee:",
color = Color.Gray,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
fontSize = 14.sp
)
Text(
text = formatSats(currentMeltQuote.feeReserve.toLong()),
color = Color.White,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
fontSize = 14.sp,
fontWeight = FontWeight.Bold
)
}
Divider(color = Color.Gray, modifier = Modifier.padding(vertical = 8.dp))
Spacer(modifier = Modifier.height(8.dp))
HorizontalDivider(color = Color.Gray)
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
@@ -375,56 +520,72 @@ private fun LightningSendContent(
text = "Total:",
color = Color.Gray,
fontFamily = FontFamily.Monospace,
fontSize = 14.sp,
fontWeight = FontWeight.Bold
)
Text(
text = formatSats(currentMeltQuote.amount.toLong() + currentMeltQuote.feeReserve.toLong()),
color = Color.White,
fontFamily = FontFamily.Monospace,
fontSize = 14.sp,
fontWeight = FontWeight.Bold
)
}
}
}
}
}
}
Spacer(modifier = Modifier.height(24.dp))
// Pay button
Button(
onClick = {
viewModel.payLightningInvoice(currentMeltQuote.id)
},
enabled = !isLoading,
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF00C851)
containerColor = Color(0xFF00C851),
disabledContainerColor = Color(0xFF2A2A2A)
),
shape = RoundedCornerShape(8.dp)
shape = RoundedCornerShape(16.dp)
) {
if (isLoading) {
CircularProgressIndicator(
color = Color.Black,
modifier = Modifier.size(16.dp)
modifier = Modifier.size(24.dp)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Filled.FlashOn,
contentDescription = "Pay Invoice",
tint = Color.Black
tint = Color.Black,
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Spacer(modifier = Modifier.width(12.dp))
Text(
text = "Pay Invoice",
text = "PAY INVOICE",
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
}
}
}
}
} else {
// Show invoice input
Column {
Column(
modifier = Modifier.fillMaxWidth()
) {
// Invoice input field
OutlinedTextField(
value = invoice,
onValueChange = { invoice = it },
@@ -444,15 +605,76 @@ private fun LightningSendContent(
colors = OutlinedTextFieldDefaults.colors(
focusedBorderColor = Color(0xFF00C851),
focusedLabelColor = Color(0xFF00C851),
unfocusedBorderColor = Color(0xFF2A2A2A),
unfocusedLabelColor = Color.Gray,
unfocusedTextColor = Color.White,
focusedTextColor = Color.White
),
modifier = Modifier.fillMaxWidth(),
maxLines = 3
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 24.dp),
minLines = 3,
maxLines = 4,
shape = RoundedCornerShape(16.dp),
trailingIcon = {
IconButton(
onClick = {
// TODO: Implement QR code scanning
}
) {
Icon(
imageVector = Icons.Filled.QrCode,
contentDescription = "Scan QR",
tint = Color(0xFF00C851)
)
}
}
)
Spacer(modifier = Modifier.height(24.dp))
// Paste button
Button(
onClick = {
clipboardManager.getText()?.text?.let { clipText ->
if (clipText.startsWith("lnbc") || clipText.startsWith("lnbtb")) {
invoice = clipText
}
}
},
modifier = Modifier
.fillMaxWidth()
.height(56.dp)
.padding(bottom = 16.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent
),
border = androidx.compose.foundation.BorderStroke(
2.dp,
Color(0xFF00C851)
),
shape = RoundedCornerShape(16.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Filled.ContentPaste,
contentDescription = "Paste",
tint = Color(0xFF00C851),
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(12.dp))
Text(
text = "PASTE FROM CLIPBOARD",
color = Color(0xFF00C851),
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
}
}
// Get quote button
Button(
onClick = {
if (invoice.isNotEmpty()) {
@@ -460,34 +682,44 @@ private fun LightningSendContent(
}
},
enabled = !isLoading && invoice.isNotEmpty(),
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF00C851)
containerColor = Color(0xFF00C851),
disabledContainerColor = Color(0xFF2A2A2A)
),
shape = RoundedCornerShape(8.dp)
shape = RoundedCornerShape(16.dp)
) {
if (isLoading) {
CircularProgressIndicator(
color = Color.Black,
modifier = Modifier.size(16.dp)
modifier = Modifier.size(24.dp)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Filled.Assessment,
contentDescription = "Get Quote",
tint = Color.Black
tint = Color.Black,
modifier = Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Spacer(modifier = Modifier.width(12.dp))
Text(
text = "Get Quote",
text = "GET QUOTE",
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
fontFamily = FontFamily.Monospace
fontFamily = FontFamily.Monospace,
letterSpacing = 1.sp
)
}
}
}
}
}
}
// Utility function to format sats
@@ -27,6 +27,7 @@ fun WalletScreen(
) {
var selectedTab by remember { mutableStateOf(0) }
var showReceiveView by remember { mutableStateOf(false) }
var showSendView by remember { mutableStateOf(false) }
val showSendDialog by walletViewModel.showSendDialog.observeAsState(false)
val showReceiveDialog by walletViewModel.showReceiveDialog.observeAsState(false)
@@ -39,6 +40,12 @@ fun WalletScreen(
walletViewModel.hideReceiveDialog()
true
}
// Close send view
showSendView -> {
showSendView = false
walletViewModel.hideSendDialog()
true
}
// Close send dialog
showSendDialog -> {
walletViewModel.hideSendDialog()
@@ -66,6 +73,15 @@ fun WalletScreen(
walletViewModel.hideReceiveDialog()
}
)
} else if (showSendView) {
// Full-screen SendView
SendView(
viewModel = walletViewModel,
onNavigateBack = {
showSendView = false
walletViewModel.hideSendDialog()
}
)
} else {
Column(modifier = modifier.fillMaxSize()) {
// Content
@@ -102,12 +118,13 @@ fun WalletScreen(
}
}
// Dialogs
// Handle dialog states
if (showSendDialog) {
SendDialog(
viewModel = walletViewModel,
onDismiss = { walletViewModel.hideSendDialog() }
)
LaunchedEffect(showSendDialog) {
if (showSendDialog) {
showSendView = true
}
}
}
if (showReceiveDialog) {