Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add share feature / optional iconOnly mode for CollapsedQR #2728

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

myxmaster
Copy link
Contributor

@myxmaster myxmaster commented Jan 10, 2025

Description

This fixes #1285.

This adds the ability to share invoices (and on-chain addresses and lightning-addresses) via OS share dialog. The shared content includes both QR and text representation. Unfortunately it depends on the app which is used for sharing if both is actually used.

  • A black/white 800x800 version of the QR will temporarily be rendered (not theme colors) for sharing and it will always use the Z logo.
  • Additionally enhanced CollapsedQR (with CopyButton/ShareButton) to be used in iconOnly mode which saves some space (currently only implemented for Receive screen).
  • Copy icon will give feedback if clicked (check icon for 5 seconds, see screenshot).
  • ShareButton works just like CopyButton.
grafik grafik grafik

Implementation details:
I was playing around a lot, and ended up with this current approach. It looks kind of complicated, but to be able to share the QR it actually has to be rendered and captured (at least I didn't find another way). I wanted to avoid rendering a 2nd hidden black/white version of the QR whenever an invoice is generated, so I ended up with this logic:

  1. User clicks ShareButton
  2. ShareButton's handlePress calls its onPress prop (handleShare from CollapsedQR)
  3. handleShare creates a new temporary QR ref and sets state
  4. handleShare starts checking qrReady state in a loop with requestAnimationFrame
  5. The state update triggers a render with the hidden QR
  6. ForwardedQRCode's getRef callback fires when QR is ready, setting qrReady to true
  7. handleShare resolves when qrReady becomes true
  8. ShareButton's shareContent executes, capturing the QR ref to base64
  9. Share dialog opens with the captured image
  10. After sharing completes, tempQRRef is cleared from state

This pull request is categorized as a:

  • New feature
  • Bug fix
  • Code refactor
  • Configuration change
  • Locales update
  • Quality assurance
  • Other

Checklist

  • I’ve run yarn run tsc and made sure my code compiles correctly
  • I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
  • I’ve run yarn run prettier and made sure my code is formatted correctly
  • I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

  • No, I’m a fool
  • Yes
  • N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

  • Android
  • iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

  • Embedded LND
  • LND (REST)
  • LND (Lightning Node Connect)
  • Core Lightning (CLNRest)
  • LndHub
  • [DEPRECATED] Core Lightning (c-lightning-REST)
  • [DEPRECATED] Core Lightning (Spark)
  • [DEPRECATED] Eclair

Locales

  • I’ve added new locale text that requires translations
  • I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

  • Contributors will need to run yarn after this PR is merged in
  • 3rd party dependencies have been modified:
    • verify that package.json and yarn.lock have been properly updated
    • verify that dependencies are installed for both iOS and Android platforms

Other:

  • Changes were made that require an update to the README
  • Changes were made that require an update to onboarding

@myxmaster myxmaster force-pushed the copy_and_share_invoice branch from 68f7439 to e437b1e Compare January 10, 2025 19:45
@kaloudis kaloudis added this to the v0.10.0 milestone Jan 10, 2025
@myxmaster myxmaster mentioned this pull request Jan 12, 2025
30 tasks
@myxmaster myxmaster force-pushed the copy_and_share_invoice branch from e437b1e to 8439520 Compare January 12, 2025 15:46
@myxmaster
Copy link
Contributor Author

Rebased on #2733 (should be merged first).

@myxmaster myxmaster force-pushed the copy_and_share_invoice branch from 8439520 to 1421d1b Compare January 12, 2025 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Ability to copy/share QR code image
2 participants