Add share feature

[myxmaster]

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.

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]

Rebased on #2733 (should be merged first).

[shubhamkmr04]

Its not rendering the logo in iOS

[myxmaster]

Interesting. No idea why that could be as usage is pretty simple:

<ForwardedQRCode
    [...]
    logo={defaultLogo}
    backgroundColor={'white'}
    logoBackgroundColor={'white'}
    logoMargin={10}
    [...]
/>

It works elsewhere on iOS though? (e.g. via Receive->Unified Invoice)

[shubhamkmr04]

It works elsewhere on iOS though? (e.g. via Receive->Unified Invoice)

No It happens at all the places where QR can be shared, android worked perfect though

[myxmaster]

No I mean, is the "Z" logo displayed in the normal QR codes on iOS? (e.g. Receive->Unified Invoice)

I'm asking because I have no idea what could be the root cause for this, if it is only happening for the shared QR.

[shubhamkmr04]

No I mean, is the "Z" logo displayed in the normal QR codes on iOS? (e.g. Receive->Unified Invoice)

I'm asking because I have no idea what could be the root cause for this, if it is only happening for the shared QR.

yup its displayed in the normal QR codes generated in iOS

[myxmaster]

:/

Ok. Can you maybe help me find out what the difference is? I cannot debug on iOS...

[shubhamkmr04]

:/

Ok. Can you maybe help me find out what the difference is? I cannot debug on iOS...

Sure, I'll take a look at the code and let you know what we can do.

[shubhamkmr04]

@myxmaster It looks like the QR logo issue on iOS happens because the capture runs before the logo fully loads. Try adding a 500ms delay here — should fix it!
await new Promise((resolve) => setTimeout(resolve, 500));

[myxmaster]

Ah ok, thanks for looking into it! I will try to fix it, if possible without a static timeout.