feat: success screen component (LNURLPay)

[im-adithya]

Describe the changes you have made in this PR

Adds a new success/failure card component

Link this PR to an issue

#1379

Type of change (Remove other not matching type)

• feat: New feature (non-breaking change which adds functionality)

Screenshots of the changes (If any)

How has this been tested?

Have to check the Failure screen (only checked it by throwing a hardcoded error)

Checklist

• My code follows the style guidelines of this project and performed a self-review of my own code
• New and existing tests pass locally with my changes
• I checked if I need to make corresponding changes to the documentation (and made those changes if needed)

[github-actions]

🚀 Thanks for the pull request!

Here are the current build files for testing:

• chrome.zip.zip
• firefox.xpi.zip
• opera.crx.zip

Download and unzip the file for your browser. Refer to the readme for detailed install instructions.

---

This build is brought to you by: null (who recently dropped 210 sats):

Checkout the Alby Lightning Mixtape: https://alby-mixtape.vercel.app - happy coding!

---

Want to sponsor the next build? send some sats to ⚡️builds@getalby.com (don't forget to provide your name)

Don't forget: keep stacking sats!

[escapedcat]

• Would be nice to get the icons as SVGs to avoid future scaling issues and make reusability easier
• Will the ResultCard be applied to all "send" screens in further PRs?

[bumi]

when does this error happen? and from the screenshot it seems the user is in a dead end there? typically a user would want to retry it? also why do we show errors here differently than in the other screens where the error message is shown under the input?

[escapedcat]

when does this error happen?

I think this was just an example-message to show how that screen looks like, right @im-adithya ?

and from the screenshot it seems the user is in a dead end there?
typically a user would want to retry it?

You mean because before a toast was used and the user could try again? If yes, then instead of "close" on the error-screen, let's use "Retry" and the user will see the form with the input again?

also why do we show errors here differently than in the other screens where the error message is shown under the input?

Let me talk to @dvoroneca

[bumi]

:) that does not answer my question of when this error happens.

I question the need of this whole screen. before it was a toast() and now it is much more code, we need to navigate with some new logic on a rather hidden button, etc.
@dvoroneca is this really better? and is this really so much better that it is worth spending the time here?

[escapedcat]

:) that does not answer my question of when this error happens.

Ah, yeah, I didn't get you meant the whole error-screen. Got it! Yes, valid point. Will talk to Diana/Adithya.

[dvoroneca]

A valid concern. Would need to find out real cases when the transaction doesn't go through and other errors to answer this question.

[escapedcat]

Maybe errors in general do not need to be blocking. Errors can be shown below i.e. the form.
Currently we use a mix of toast and "show below form".
We can still align the success-screens for all "send"-types.

[bumi]

A valid concern. Would need to find out real cases when the transaction doesn't go through and other errors to answer this question.

why do the cases when a transaction goes wrong matter?

[dvoroneca]

The designs of these screens had a CTA specific for cases when an error occurs. File here

There may be cases where the connection is lost, the node is down or other technical problems prevent the funds from being sent. It is true that we already have an error popup that may be displayed on the screen before that (where there is data entry and a call to action for payment), but this window has no CTA to direct the user to, for example, some resource.... help.

It is also a way for us to find out what kind of errors users encounter. When they contact the helpdesk and say that there was an error when they sent the funds.

Not being able to make payments is a bad UX and users may want to try another service to send funds if Alby isn't working. Please let me know if I have missed anything.

[dvoroneca]

How about we roll back the error screen for now and leave the success screen? @escapedcat @escapedcat @bumi

[escapedcat]

How about we roll back the error screen for now and leave the success screen?

Yeah, that would be great. At least in this case the design isn't wasted and we finally can align the send-screens in a way.