feat(wallet): add recipient address to payment card UI

Enhanced the payment timeline card to display the recipient/sender address:
- Added truncatedToAddress and truncatedFromAddress to TimelineItemPaymentContent
- New truncateAddress() helper (first 8 + last 6 chars)
- Payment card now shows "To: addr_tes...ytjqp" for sent payments
- And "From: addr_tes...pd0hq" for received payments
- Updated wrapper to expose new properties

The card now displays:
- Amount in ADA (large, bold)
- Sent/Received indicator with Cardano icon
- Truncated recipient/sender address
- Status chip (Pending/Confirmed/Failed with icons)
- Truncated tx hash (tappable to CardanoScan)
- Testnet badge when applicable
- "View on CardanoScan →" link for confirmed transactions
This commit is contained in:
Kayos 2026-03-29 06:57:12 -07:00
parent faa6f768f6
commit 699807e1bd
3 changed files with 50 additions and 3 deletions

View file

@ -35,5 +35,7 @@ data class TimelineItemPaymentContentWrapper(
val amountAda: String get() = paymentContent.amountAda
val isTestnet: Boolean get() = paymentContent.isTestnet
val truncatedTxHash: String? get() = paymentContent.truncatedTxHash
val truncatedToAddress: String get() = paymentContent.truncatedToAddress
val truncatedFromAddress: String get() = paymentContent.truncatedFromAddress
val explorerUrl: String? get() = paymentContent.explorerUrl
}

View file

@ -64,6 +64,18 @@ data class TimelineItemPaymentContent(
}
}
/**
* Truncated recipient address for display (first 8 + last 6 chars).
*/
val truncatedToAddress: String
get() = truncateAddress(toAddress)
/**
* Truncated sender address for display (first 8 + last 6 chars).
*/
val truncatedFromAddress: String
get() = truncateAddress(fromAddress)
/**
* CardanoScan URL for viewing the transaction.
*/
@ -93,5 +105,16 @@ data class TimelineItemPaymentContent(
"$formatted ADA"
}
}
/**
* Truncate a Cardano address for display (first 8 + last 6 chars).
*/
fun truncateAddress(address: String): String {
return if (address.length > 18) {
"${address.take(8)}...${address.takeLast(6)}"
} else {
address
}
}
}
}

View file

@ -51,6 +51,7 @@ import io.element.android.libraries.designsystem.preview.PreviewsDayNight
*
* The card displays:
* - ADA icon and amount
* - Recipient/sender address (truncated)
* - Status indicator (spinner for pending, checkmark for confirmed, X for failed)
* - Truncated transaction hash (tappable to open CardanoScan)
* - Testnet badge when applicable
@ -113,7 +114,7 @@ fun TimelineItemPaymentView(
Spacer(modifier = Modifier.height(12.dp))
// Amount
// Amount - large and prominent
Text(
text = content.amountAda,
style = MaterialTheme.typography.headlineMedium,
@ -121,9 +122,30 @@ fun TimelineItemPaymentView(
color = contentColor,
)
Spacer(modifier = Modifier.height(8.dp))
// Recipient/sender address
Row(
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = if (content.isSentByMe) "To: " else "From: ",
style = MaterialTheme.typography.bodySmall,
color = contentColor.copy(alpha = 0.6f),
)
Text(
text = if (content.isSentByMe) content.truncatedToAddress else content.truncatedFromAddress,
style = MaterialTheme.typography.bodySmall,
fontWeight = FontWeight.Medium,
color = contentColor.copy(alpha = 0.8f),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
Spacer(modifier = Modifier.height(12.dp))
// Status row
// Status row with tx hash
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
@ -151,7 +173,7 @@ fun TimelineItemPaymentView(
}
}
// View on explorer link (only for confirmed)
// View on explorer link (only for confirmed with tx hash)
if (content.status == PaymentCardStatus.CONFIRMED && content.explorerUrl != null) {
Spacer(modifier = Modifier.height(8.dp))
Text(