[Feature] Add success screen confirmation when paying webln invoices

[stackingsaunter]

Feature description

Currently, when paying Webln called invoices, Alby does not show any in-extension confirmation and only relies on in-browser toast confirmations.

Unfortunately, this means all users who have notifications turned off for their browsers (or are in "focus" mode for example) never see any visual confirmation of their payment from Alby when paying webln invoices.

This gets worse if website when users is paying does not show any visual confirmation as well - in that case users have 0 visual clues if the payment went through at all. That requires users to open the extension and check outgoing transactions and leads to bad experience of confusion and clunkiness. Good example of such behaviour is tipping taggers on btcmap.org

Describe the solution

I propose a quick, 2 or 3 seconds in-extension success confirmation screen. I can see two ways of implementation, depending on technical constrains:

1. If it’s possible for Alby to detect user notifications settings, then:
   • If user has notifications on, show only browser toast messages
   • If user has notifications turned off, display in-extension success confirmation
2. If we can't detect users settings, then I suggest we show only in-extension confirmation.

The quickest implementation of this is to take current payment confirmation screen that Alby displays when we make payments directly in-extension and just a simple disappearing bar that will indicate that the window will close soon.

You can see how it could look like on this prototype.

Describe alternatives

Nagging all places that implemented Webln to add visual confirmations when invoice is paid.

Additional context

If you like the idea, I can iterate on confirmation screen to be more suitable for this interaction, the one presented here was the one I thought would require the least amount of dev work.

[stackingsaunter]

Here's a design ready for implementation, for both WebLN payments as non-WebLN payments as well:

Link to animated spinner svg

Link to Figma file

You can see animated SVG here of both flows:

1. WebLN payments flow

When paying WebLN, confirmation screens appear with spinner animation, and when it ends (1800ms), extension window dissapear.

2. Non-WebLN payments flow

This screen replaces current success screen. It does not close, until closed manually by the user.

Proposed implementation details:

Note: crossed zeroes in Inter is not a must, but a nice have here (it increases numbers legibility)

[jankoegel]

Note: crossed zeroes in Inter is not a must, but a nice have here (it increases numbers legibility)

They should work with font-feature-setting: 'zero' on; in CSS.

Demo from the website:

[Ladyperpetua]

can i please be assigned this issue if it is still open? @stackingsaunter

[Ladyperpetua]

hi @stackingsaunter good afteroon...i've been working on the design of this feature....im quite confused about the disappearing extension window, do you mean you want the toast message that pops up to disappear

[Ladyperpetua]

could i show you an example of what i did and you could explain more on what you mean because i'm still quite confused about the disappearing part.

[stackingsaunter]

Thanks for tackling this @Ladyperpetua!

When user is transacting in the popup (open extension and transacting from there), there should not be dissapearing or autoclose, and just a close button.

But when transaction is initiated from WebLN (meaning users is on a website like stacker.news or lnmarkets or any other website that has WebLN implemented) and website initiates the payment, the payment screens opens in a window, like int the same like in the prototype. In that case, when user pays, they should see confirmation and it should dissapear (autoclose) soon.

This shouldn't be a toast message for the reason that some users have notifications turned off, which means they will not see a toast message. So the confirmation is in the extension itself.

Does that make it clear?

[Ladyperpetua]

Yes, its much clearer now, thank you....I already implemented that and I will send a PR soon

[Ladyperpetua]

Good afternoon, please I need feedback on the PR I created on this issue; can it please be reviewed