📋 Clipboard support

[reneaaron]

trafficstars

Feature description

When I have an invoice on my clipboard it would be awesome if Alby would detect that and would offer to take me to the screen where I can pay / withdraw. That could potentially also remove a lot of confusion about different ways to pay / withdraw (LNURL, invoices, LNURL-withdraw, etc).

TODOs

• [x] Check browser APIs

Related docs:

• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#reading_from_the_clipboard
• https://web.dev/async-clipboard/#paste-reading-data-from-clipboard
• https://web.dev/async-clipboard/#security-and-permissions

Describe the solution

Alby could offer some kind of a popup asking "You have a withdraw link on your clipboard, do you want to use it?"

[reneaaron]

Did a first prototype here:

https://github.com/getAlby/lightning-browser-extension/tree/feature/clipboard

Clipboard support worked in Chrome / Firefox.

[reneaaron]

Design inspiration

Integrating via button

Integration via context-aware popups

From bitcoin.design:

cc @dvoroneca

[bumi]

I am not sure about the UX on this so far and because it requires more permissions we should be sure that this makes the UX much better and then maybe combine it with potential other permission changes?

[escapedcat]

combine it with potential other permission changes?

Like what for example?

we should be sure that this makes the UX much better

This could be a first iteration:

• add the permission
• enable it per default in settings
• add the button in UI
• announce and ask for feedback

A follow-up could be:

• remove button
• let Alby detect it and i.e. show a modal which says something "Looks like you have [LNURL] in your clipboard, do you want to do xyz?"

Just an idea. Should we do a refinement call?

[reneaaron]

@bumi There are 2 options here:

1. Disable it by default (which should be the case now) Users need to go to settings and enable the setting (which will ask them to give this optional permission to the extension)

2. Enable it by default Needs us to add this permission to the required permissions in manifest, would prompt every user with the next update.

I'd prefer to go with 1) as it is unobstrusive, we can switch to 2) any time in future if we want to.

[bumi]

Is this really such an UX improvement that it justifies all this? These huge clipboard buttons are also not the nicest imo. 🙈 if we do this optional we need to add another check when this button is there and when not. And how many people will actually go to the setting to enable this? (would you?) People will have all kinds of stuff in that clipboard how will this be handled?

[reneaaron]

Is this really such an UX improvement that it justifies all this?

We came here from the initial discussion around lnurl-w, where you have to go to "send" in order to receive (which isn't intuitive IMO)

These huge clipboard buttons are also not the nicest imo. 🙈

Agree. Would definitely need some design love.

if we do this optional we need to add another check when this button is there and when not. And how many people will actually go to the setting to enable this? (would you?)

Good point. I probably would but that doesn't really count. I think we could also make the point that users already trust us with their node credentials, so why not the clipboard, too. Also we just parse the clipboard and offer options, content will never touch any 3rd parties without the user clicking the clipboard button.

People will have all kinds of stuff in that clipboard how will this be handled?

We would parse the clipboard for invoices, lightning links, lnurl-w, lnurl-pay and display the button only if there is something on the clipboard that seems like we could handle it.

Do you see any other problems in there? How would you like to move forward here?

[rolznz]

I encountered the issue having to paste a LNURL-withdraw link in the send input and found these tickets. @reneaaron @bumi Is this something I could potentially work on? It looks like this and https://github.com/getAlby/lightning-browser-extension/issues/1560 are stale.

I had an idea for both the send (automatically paste invoice) and receive (automatically copy invoice after creating it, or automatically paste LNURL-w link) screens, if the copy to/from clipboard permission is not enabled, to have a button to enable the clipboard permission on the screens (rather than having to go to the settings to initially enable it). That way people will see the enable button when it is not enabled yet. The other part is adding the tabs on the receive screen so it's possible to paste a LNURL-w link

[bumi]

I am generally a bit critical about this.

• it requires a new permission and if we make this permission optional we need to add a button to the UI (each button adds complexity for the user and here it also adds complexity to check for those permissions)
• is c&p such a big usecase that justifies this complexity?
• auto copy to clipboard is imo a bad practice as it could overwrite things that the user has in the clipboard
• can we efficiently identify in JS what's in the clipboard?

[rolznz]

I am generally a bit critical about this.

There is another option which we could address the LNURL-W and LNURL-Auth UX without dealing with the clipboard. I agree with Rene that using the clipboard allows for a smoother UX for these features. However, since clipboard support is opt-in I think we still need to support a non-clipboard UX anyway. Maybe this should be addressed first?

• it requires a new permission and if we make this permission optional we need to add a button to the UI (each button adds complexity for the user and here it also adds complexity to check for those permissions)

We could add the buttons after we detect that it looks like they are using copy/paste functionality manually, and have never explicitly disabled clipboard suggestions (Although I do agree it increases complexity within the app)

• is c&p such a big usecase that justifies this complexity?

I really like webln integration how it does stuff without clicks (and setting allowances too). I think it is just a UX improvement that makes Alby feel awesome and so much better than traditional payment system methods. All these little things help?

• auto copy to clipboard is imo a bad practice as it could overwrite things that the user has in the clipboard

I always copy the link when I create a receive invoice. I think the only other option right now is scanning the QR code, which unless you want to scan with your own mobile device I think is probably less used?

• can we efficiently identify in JS what's in the clipboard?

Yes, it seems pretty easy to read the clipboard. I think we could check the prefix (lnbc, LNURL) or a lightning address regex to avoid pasting anything that is unrelated? Would this cover all invoice types?

[bumi]

I always copy the link when I create a receive invoice. I think the only other option right now is scanning the QR code, which unless you want to scan with your own mobile device I think is probably less used?

can we ask users? What do users use the receive function for/when do they create invoices manually? But I really don't like that we potentially overwrite the user's clipboard. Where does an action automatically write things to a clipboard?

Yes, it seems pretty easy to read the clipboard. I think we could check the prefix (lnbc, LNURL) or a lightning address regex to avoid pasting anything that is unrelated? Would this cover all invoice types?

so if I have a big binary file in the clipboard I can still easily check this?

But ultimately we should not require that permission. less permissions is always better.

[reneaaron]

I haven't seen any feature requests in that regard, also we're kind of solving this problem by offering more clear ways to e.g. redeem LNURL vouchers by explicitly offering this option in the UI.