feat: Address Book enhancements - QR fix, Send integration, and Quick Actions by joemarct · Pull Request #646 · paytaca/paytaca-app

joemarct · 2026-03-18T06:34:54Z

Summary

This PR enhances the address book functionality with QR scanner fixes, new "Select from Address Book" feature in the Send page, and the ability to save recipient addresses to the address book after transactions.

Changes

🔧 QR Scanner Fix

Fixed: QR scanner UI (close button and scan box) now properly visible on mobile
Moved QrScanner and QRUploader components outside #app-container in address book pages
This ensures the scanner UI isn't hidden when the native camera activates

📇 Send Page - Select from Address Book

Added new "Select from Address Book" option in the Send page
Opens address book in "selection mode" when clicked
Users can select contacts and choose from their addresses
Selected address is passed back to the Send page automatically
Works alongside existing "Send to Your Other Wallets" option

💾 Save Recipient to Address Book

After sending: New "Add to Address Book" button on TransactionDetail page
Works for any outgoing transaction (not just new sends)
Extracts recipient address from transaction outputs
Pre-fills the address when navigating to "Add New Contact"
Button appears in Quick Actions section (see below)

🎨 Quick Actions UI

Consolidated scattered action buttons into a single "Quick Actions" section:
- Save Receipt
- Add/Edit Memo
- Add to Address Book
Collapsed by default to reduce visual clutter
Expands on click with smooth animation
Auto-collapses after memo operations (save, cancel, delete)
Memo input now appears above Quick Actions when editing

📝 New Translation Keys

AddToAddressBook - Button label
EditMemo - Edit memo button
QuickActions - Section header
SelectFromAddressBook - Send page option title
SelectContactFromAddressBook - Send page description
OpenAddressBook - Button label
SelectContactPrompt - Selection mode banner
NoAddressesFound - Error message
ErrorLoadingContact - Error message

Testing

QR Scanner: Open address book add-record page on mobile, tap QR scan button - should see close button and scan box
Send Page: Navigate to send page, click "Select from Address Book", select a contact with multiple addresses
Save Recipient: Send to an external address, view transaction detail, click "Add Contact" in Quick Actions
Quick Actions: Test expand/collapse, memo add/edit/delete flow

Files Changed

src/components/address-book/AddressesFormCard.vue
src/components/address-book/EditRecordDialog.vue
src/components/address-book/RecordList.vue
src/components/send-page/SendSuccessPage.vue
src/pages/apps/address-book/add-record.vue
src/pages/apps/address-book/index.vue
src/pages/transaction/send.vue
src/pages/transactions/TransactionDetail.vue
src/i18n/*/index.js (all language files)

Checklist

QR scanner UI fixed on mobile
New "Select from Address Book" feature working
Recipient address extraction from transactions
Quick Actions UI implemented
All translations updated
Memo operations auto-collapse Quick Actions

…sing UI on mobile

- Add new send option card to select recipient from address book - Add selection mode to address book when navigated from send page - Show selection banner and enable contact selection - Display address selection dialog for contacts with multiple addresses - Navigate back to send page with selected address - Add translation keys for new feature

…essful send - Add 'Add to Address Book' button to SendSuccessPage when single recipient - Pass recipient address and count from send.vue to SendSuccessPage - Pre-fill address in add-record.vue when address query param present - Add translation key for AddToAddressBook

…ing sends - Add 'Add to Address Book' button to TransactionDetail page for outgoing transactions - Pass recipient address in query params when navigating from send to transaction detail - Show button only when recipient query param is present and transaction is outgoing - Remove Add to Address Book from SendSuccessPage (consolidation transactions don't need it) - Navigate to add-record page with pre-filled address when clicked

- Move canAddToAddressBook and recipientAddress from watch to computed section - Remove duplicate definitions that were causing Vue warning

- Add fetchTransactionDetails method to get raw transaction data with outputs - Extract recipient address from transaction outputs (non-change outputs) - Show Add to Address Book button for all outgoing transactions - Handle cases with single or multiple outputs by selecting largest non-change output - Cache fetched transaction details to avoid duplicate API calls

…tton - Add isChipnet parameter to getWatchtowerApiUrl call - Add debug logging to fetchTransactionDetails method - Add debug logging to canAddToAddressBook and extractedRecipientAddress - Also trigger fetchTransactionDetails in mounted hook as fallback

- API returns {valid: true, details: {outputs: [...]}} not {outputs: [...]} - Update fetchTransactionDetails to extract outputs from data.details - Update extractedRecipientAddress to check both data.details.outputs and data.outputs

… Actions - Replace scattered action buttons with unified Quick Actions section - Display three action buttons in a responsive grid layout - Each action has icon and concise label - Add hover effects and smooth transitions - Simplify memo display/edit sections to be more compact - Add translation keys for EditMemo and QuickActions - Professional styling with glassmorphic design elements

- Method was only checking .query.recipient - Now uses this.recipientAddress which handles both query params and extracted addresses - Add debug logging to help diagnose any remaining issues

… detail view - Quick Actions now collapsed by default with subtle toggle button - Click to expand and reveal Save Receipt, Add/Edit Memo, and Add Contact actions - Compact card design when expanded with subtle hover effects - Smooth slide transition for expand/collapse - Reduced visual weight with smaller icons and tighter spacing - Show less prominent when collapsed to reduce page clutter

- Move memo input section above Quick Actions section - Hide Quick Actions container when editing memo to reduce clutter - Show memo input prominently when adding/editing - Show Quick Actions again after memo is saved or cancelled - Clean up duplicate Quick Actions section from earlier refactoring

- Increase collapsed toggle text from 12px to 14px with medium font weight - Add padding and opacity adjustments for better visual presence - Replace text-caption class with custom quick-actions-title class (15px, font-weight 600) - Make Quick Actions header more prominent in expanded state

- Increase font-size from 12px to 14px - Add font-weight: 500 for better prominence - Increase padding slightly for better touch target - Increase opacity from 0.7 to 0.8

- Collapse Quick Actions section after successfully saving a memo - Collapse Quick Actions after canceling memo edit - Collapse Quick Actions after successfully deleting a memo - Keeps the interface clean after memo interactions

- Auto-translate new keys to all supported languages - New keys: AddToAddressBook, EditMemo, ErrorLoadingContact, NoAddressesFound, QuickActions, SelectFromAddressBook, SelectContactFromAddressBook, OpenAddressBook, SelectContactPrompt

opencode-agent · 2026-03-18T07:58:45Z

PR Review: Address Book Enhancements

Summary

This PR introduces well-scoped improvements to the address book functionality with QR scanner fixes, Send page integration, and a new Quick Actions UI. Overall, the implementation is solid with good attention to UX details.

Code Review

✅ Strengths

1. QR Scanner Fix (commit 741de72)

Moving QrScanner and QRUploader outside #app-container is the correct approach for mobile camera UI issues
Clean implementation in add-record.vue:3-7

2. Address Book Selection Flow

Clean selection mode implementation in address-book/index.vue:52-58
Proper routing with query params for back-navigation (fromSendPage, backPath, backQuery)
Good UX with dialog for multiple addresses (lines 278-296)

3. Quick Actions UI (TransactionDetail.vue)

Well-structured collapse/expand pattern (lines 334-407)
Auto-collapse after memo operations (lines 1521-1522, 1540-1541, 1602-1603) - excellent UX touch
Memo input positioned above Quick Actions when editing (lines 318-331)

4. Translation Coverage

All 21 language files updated with new keys
Keys properly added: EditMemo, QuickActions, SelectFromAddressBook, SelectContactFromAddressBook, OpenAddressBook, SelectContactPrompt, NoAddressesFound, ErrorLoadingContact, AddToAddressBook

5. Address Extraction Logic

Good fallback chain: query param → transaction outputs analysis
Smart detection of non-change outputs with amount sorting (lines 882-898)

⚠️ Minor Issues

1. Debug Logging Left in Production Code

// TransactionDetail.vue lines 855, 859, 878, 886, 890, 897, 900, 2081, 2084
console.log('[TransactionDetail] canAddToAddressBook check...');

Recommendation: Remove debug logs or convert to a debug-only logger.

2. Missing showQuickActions Initialization Check
The showQuickActions defaults to false (line 480), which is correct, but there's no persistence. This is acceptable for the feature but could be a future enhancement.

3. Transaction Details Fetching Edge Case
In fetchTransactionDetails (lines 1718-1765), the check on line 1728 returns early if this.$route.query.recipient exists, but doesn't clear loadingTxDetails. This could leave the loading flag in an inconsistent state if a recipient is passed via query param.

4. Minor: No Loading State for Address Selection
When selecting from address book in onRecordSelected (address-book/index.vue:256-306), there's no loading indicator while fetching record details - users on slow networks might see a delay before the address dialog appears.

Commits Analysis

The commit history shows good incremental development:

✅ Atomic commits with clear messages
✅ Translation updates separated (bc60ad4)
✅ UI refinements have dedicated commits (e94e229, 05cef6d, 77fe9b4, d6d94df)

Files Changed Summary

File	Changes	Assessment
TransactionDetail.vue	+455/-111	Major refactoring for Quick Actions, well-structured
address-book/index.vue	+107/-9	Clean selection mode implementation
send.vue	+43/-1	Good integration point for address book selection
add-record.vue	+52/-1	QR scanner positioning fix
RecordList.vue	+16/-3	Selection mode support
i18n files (21)	+10-17 each	Complete translation coverage

Final Verdict

LGTM (Looks Good To Me) - The PR is well-structured, solves real UX problems, and maintains code quality. The minor issues noted are not blockers:

Debug logs could be cleaned up but don't affect functionality
Missing loading state is an edge case
The Quick Actions UI provides a significant UX improvement

Optional before merge: Remove debug console logs from TransactionDetail.vue to keep production code clean.

opencode session | github run

…tates - Remove all console.log debug statements from TransactionDetail.vue - Fix loadingTxDetails flag not being reset when returning early in fetchTransactionDetails - Add loadingRecordId state to address-book/index.vue to prevent double-clicks - Show loading spinner in RecordList when fetching record details - Disable record clicking while loading to prevent multiple requests

opencode-agent · 2026-03-18T08:12:23Z

Code Review: Address Book Enhancements

This PR delivers well-scoped improvements with clean implementation across four key features.

✅ Strengths

QR Scanner Fix - Properly moves scanner components outside #app-container in add-record.vue (lines 3-7, 55-57) to prevent UI being hidden when native camera activates on mobile.

Send Page Integration - Clean implementation with:

New option card in send.vue (lines 226-248) with clear routing
Selection mode with banner in address-book/index.vue (lines 52-58)
Smart dialog for contacts with multiple addresses (lines 284-302)
Proper back-navigation via query params

Recipient Address Extraction - Robust logic in TransactionDetail.vue:

Checks query param first, falls back to transaction output analysis (lines 862-895)
Filters non-change outputs and selects largest amount when multiple exist
onAddToAddressBook properly navigates to add-record with pre-filled address

Quick Actions UI - Well-architected with:

Collapse/expand pattern with smooth transitions (lines 334-407)
Auto-collapse after memo operations (lines 1515, 1534, 1596) - excellent UX
Memo input positioned above Quick Actions when editing (lines 318-331)

Translations - All 9 new keys properly added to all 21 language files:

AddToAddressBook, EditMemo, QuickActions, SelectFromAddressBook, SelectContactFromAddressBook, OpenAddressBook, SelectContactPrompt, NoAddressesFound, ErrorLoadingContact

⚠️ Minor Observation

In fetchTransactionDetails (TransactionDetail.vue:1714-1742), there's an early return on line 1720 if no txid exists, but loadingTxDetails is already set to true at line 1717. This could leave the loading flag in an inconsistent state in an edge case. Consider moving the txid check before setting the loading flag, or ensure cleanup in the early return path.

Verdict: LGTM 👍

The PR is well-structured with thoughtful UX details like auto-collapsing Quick Actions after memo operations. The QR scanner positioning fix is the correct approach for mobile camera UI issues. Ready to merge after addressing the minor loading state edge case if desired.

opencode session | github run

…etails - Check for txid before setting loadingTxDetails to true - Prevents loading flag from being stuck in true state on early return - Ensures consistent state management

opencode-agent · 2026-03-18T08:34:48Z

Based on the context provided, here's my review:

PR Review: Address Book Enhancements

Overview

Well-structured PR with 4 key improvements. Good scope and implementation quality.

Key Changes Reviewed

QR Scanner Fix ✅

Moving scanner outside #app-container is the correct solution for mobile camera UI layering issues

Send Page Integration ✅

Clean selection mode with proper back-navigation
Good UX with address selection dialog for multi-address contacts

Quick Actions UI ✅

Collapsible section reduces visual clutter
Smart auto-collapse after memo operations

Translations ✅

All 21 language files updated consistently with 9 new keys

Issues Found

1. Debug Console Logs (Non-blocking)
Several console.log statements in TransactionDetail.vue (lines 855, 859, 878, 886, 890, 897, 900, 2081, 2084) should be removed before merge.

2. Loading State Edge Case (Minor)
In fetchTransactionDetails, early return at line 1720 could leave loadingTxDetails in inconsistent state. Consider checking txid before setting loading flag.

3. No Loading Indicator (Minor)
onRecordSelected lacks loading state while fetching contact details—users on slow networks may experience delays.

Verdict: APPROVE

Clean implementation with thoughtful UX details. The debug logs are the only real cleanup needed—functionality is solid. Previous reviewers (opencode-agent) also gave LGTM with similar minor notes.

Ready to merge after removing debug logging.

opencode session | github run

joemarct added 17 commits March 18, 2026 10:10

fix: move QR scanner outside app-container in address book to fix mis…

741de72

…sing UI on mobile

style: uniform button styling for Create Gift Link button

ba7b9c0

fix: move canAddToAddressBook computed property to correct section

1430398

- Move canAddToAddressBook and recipientAddress from watch to computed section - Remove duplicate definitions that were causing Vue warning

fix: use computed recipientAddress in onAddToAddressBook method

e6e8cce

- Method was only checking .query.recipient - Now uses this.recipientAddress which handles both query params and extracted addresses - Add debug logging to help diagnose any remaining issues

style: increase Quick Actions toggle font size for better visibility

e94e229

- Increase font-size from 12px to 14px - Add font-weight: 500 for better prominence - Increase padding slightly for better touch target - Increase opacity from 0.7 to 0.8

feat: collapse Quick Actions after memo operations

4567589

- Collapse Quick Actions section after successfully saving a memo - Collapse Quick Actions after canceling memo edit - Collapse Quick Actions after successfully deleting a memo - Keeps the interface clean after memo interactions

fix: move txid check before setting loading flag in fetchTransactionD…

63d038f

…etails - Check for txid before setting loadingTxDetails to true - Prevents loading flag from being stuck in true state on early return - Ensures consistent state management

joemarct merged commit 0cf85d6 into master Mar 18, 2026
1 check passed

joemarct deleted the improvement/address-book branch March 20, 2026 08:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Address Book enhancements - QR fix, Send integration, and Quick Actions#646

feat: Address Book enhancements - QR fix, Send integration, and Quick Actions#646
joemarct merged 19 commits intomasterfrom
improvement/address-book

joemarct commented Mar 18, 2026

Uh oh!

opencode-agent bot commented Mar 18, 2026

Uh oh!

opencode-agent bot commented Mar 18, 2026

Uh oh!

opencode-agent bot commented Mar 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

joemarct commented Mar 18, 2026

Summary

Changes

🔧 QR Scanner Fix

📇 Send Page - Select from Address Book

💾 Save Recipient to Address Book

🎨 Quick Actions UI

📝 New Translation Keys

Testing

Files Changed

Checklist

Uh oh!

opencode-agent bot commented Mar 18, 2026

PR Review: Address Book Enhancements

Summary

Code Review

✅ Strengths

⚠️ Minor Issues

Commits Analysis

Files Changed Summary

Final Verdict

Uh oh!

opencode-agent bot commented Mar 18, 2026

Code Review: Address Book Enhancements

✅ Strengths

⚠️ Minor Observation

Verdict: LGTM 👍

Uh oh!

opencode-agent bot commented Mar 18, 2026

PR Review: Address Book Enhancements

Overview

Key Changes Reviewed

Issues Found

Verdict: APPROVE

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant