extension
extension copied to clipboard
leather-wallet
Add global app error screen
@mica000 can you please help me to come up with a design for a nice error page?
Currently we just dump the console to the page and there's no way for users to recover from the problem:
Designs in here: https://www.figma.com/file/Li7qK8ZIG9c5dKSNOPO4iCtv/%E2%9D%96-Design-System?type=design&node-id=5452-43698&mode=design&t=NZ4EwmI5zZnbylRG-4
@alter-eggo @kyranjamie could you perhaps clarify the need of this redesign? Asking because in light of the approval UX, all errors are already being redesigned so I' assuming what you are asking is to redesign smt for the existing app? I'm confused because this is saying its part of the Establish UI library milestone.
@mica000 - we want to add an error screen so users don't just see white text like here.
@alter-eggo did a good job of improving it but we just want to get design approval of what he did here or else feedback on what he can change.
It's part of the UI library milestone as we should have an error component in the library we can use
@pete-watters @alter-eggo Sorry all the questions, but Im a bit in the dark with the urgency and context of this one given we are redesigning all errors on Approval UX right now, however is this currently blocking development and needs to be redesigned asap?
Also in relation to this visual that was shared, will this be included in the containers work? And if so, can we use the new footer and header components on the designs?
@pete-watters @alter-eggo Sorry all the questions, but Im a bit in the dark with the urgency and context of this one given we are redesigning all errors on Approval UX right now, however is this currently blocking development and needs to be redesigned asap?
Also in relation to this visual that was shared, will this be included in the containers work? And if so, can we use the new footer and header components on the designs?
No problem at all. This is something that @alter-eggo is adding seperately to containers.
Right now if users hit any errors they see a page like this: https://github.com/leather-wallet/extension/assets/2938440/0963eae6-7d28-4179-b17e-8f5fad2b9beb
@alter-eggo just added a nicer page to show instead of this and we want to check it looks OK with you. If you want to give a quick design with header / footer we can add that.
So the options are:
- We do nothing yet and fix this in Approval UX
- If what @alter-eggo did looks OK as an interim improvement lets add that for now then improve in Approval UX
- If you want to give us a newer design with headers + footers we can do that instead
@mica000 @fabric-8 - do we have a new design for this somewhere in Approval UX now we can use?
It would be great if we can just have some better handling of these pages.
If we don't have a new design I think we should just merge what @alter-eggo did already as it's better than an empty screen and stack trace
@pete-watters In the context of approval UX, we have a general layout/design that covers errors (signing state) & failures (transaction state) here
There's an accompanying notion database outlining the copy for the various types of errors we are tracking so far.
Hope that's helpful, feel free to reach out / ping me if there are any questions or so!
we have such new design https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=14262-121111&mode=design&t=6x2thsQaW0T2aNEr-0
I will try to implement it this week or early next