Browse Source
- Replace CSV QR value copying with URL generation for better UX - Add generateEndorserJwtUrlForAccount import and Account type - Implement proper error handling for URL generation failures - Maintain consistency with ContactQRScanFullView behavior - Add documentation for the URL solution implementation Recipients can now click shared URLs to add contacts directly instead of manually pasting CSV data into input fields. addresses: https://app.clickup.com/t/86b63xhz4get-get-hash
3 changed files with 116 additions and 13 deletions
@ -0,0 +1,84 @@ |
|||
# Contact Sharing - URL Solution |
|||
|
|||
## Overview |
|||
|
|||
Simple implementation to switch ContactQRScanShowView from copying QR value (CSV) to copying a URL for better user experience. |
|||
|
|||
## Problem |
|||
|
|||
The ContactQRScanShowView was copying QR value (CSV content) to clipboard instead of a URL, making contact sharing less user-friendly. |
|||
|
|||
## Solution |
|||
|
|||
Updated the `onCopyUrlToClipboard()` method in ContactQRScanShowView.vue to generate and copy a URL instead of the QR value. |
|||
|
|||
## Changes Made |
|||
|
|||
### ContactQRScanShowView.vue |
|||
|
|||
**Added Imports:** |
|||
```typescript |
|||
import { generateEndorserJwtUrlForAccount } from "../libs/endorserServer"; |
|||
import { Account } from "@/db/tables/accounts"; |
|||
``` |
|||
|
|||
**Updated Method:** |
|||
```typescript |
|||
async onCopyUrlToClipboard() { |
|||
try { |
|||
// Generate URL for sharing |
|||
const account = (await libsUtil.retrieveFullyDecryptedAccount( |
|||
this.activeDid, |
|||
)) as Account; |
|||
const jwtUrl = await generateEndorserJwtUrlForAccount( |
|||
account, |
|||
this.isRegistered, |
|||
this.givenName, |
|||
this.profileImageUrl, |
|||
true, |
|||
); |
|||
|
|||
// Copy the URL to clipboard |
|||
useClipboard() |
|||
.copy(jwtUrl) |
|||
.then(() => { |
|||
this.notify.toast( |
|||
"Copied", |
|||
NOTIFY_QR_URL_COPIED.message, |
|||
QR_TIMEOUT_MEDIUM, |
|||
); |
|||
}); |
|||
} catch (error) { |
|||
logger.error("Failed to generate contact URL:", error); |
|||
this.notify.error("Failed to generate contact URL. Please try again."); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
## Benefits |
|||
|
|||
1. **Better UX**: Recipients can click the URL to add contact directly |
|||
2. **Consistency**: Both ContactQRScanShowView and ContactQRScanFullView now use URL format |
|||
3. **Error Handling**: Graceful fallback if URL generation fails |
|||
4. **Simple**: Minimal changes, no new components needed |
|||
|
|||
## User Experience |
|||
|
|||
**Before:** |
|||
- Click QR code → Copy CSV data to clipboard |
|||
- Recipient must paste CSV into input field |
|||
|
|||
**After:** |
|||
- Click QR code → Copy URL to clipboard |
|||
- Recipient clicks URL → Contact added automatically |
|||
|
|||
## Testing |
|||
|
|||
- ✅ Linting passes |
|||
- ✅ Error handling implemented |
|||
- ✅ Consistent with ContactQRScanFullView behavior |
|||
- ✅ Maintains existing notification system |
|||
|
|||
## Deployment |
|||
|
|||
Ready for deployment. No breaking changes, maintains backward compatibility. |
Loading…
Reference in new issue