crowd-funder-from-jason/docs/contact-sharing-url-solution.md at d086ab2f46c32737614727e97bf1524f4a862578

forked from jsnbuchanan/crowd-funder-for-time-pwa

Files

Matthew Raymer 6868a322f1 feat: switch ContactQRScanShowView to URL-based contact sharing

- 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/86b63xhz4

2025-08-07 03:14:45 +00:00

2.2 KiB

Raw Blame History

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:

import { generateEndorserJwtUrlForAccount } from "../libs/endorserServer";
import { Account } from "@/db/tables/accounts";

Updated Method:

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

Better UX: Recipients can click the URL to add contact directly
Consistency: Both ContactQRScanShowView and ContactQRScanFullView now use URL format
Error Handling: Graceful fallback if URL generation fails
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.

2.2 KiB Raw Blame History

Contact Sharing - URL Solution