Sliding drawers / Desktop view

[carletex]

Instead of modals (send, receive, future: settings), let's have some sliding drawer. Let's check if daisyUI's drawers are helpful https://daisyui.com/components/drawer/ (if not, feel free to roll our own solution)

I think the solution of drawers ("<" to close) is great, since it gives a mobile app feeling. e.g. (don't pay attention to the specific details of settings)

Another option (how rainbow wallet does it):

---

In a related note (maybe it could be a diff issue/PR, but I think affects sliding drawers): how should we handle the Desktop view. Currently, we are just limiting the wrapper width (except for the ETH price indicator):

But maybe it makes more sense to have the wrapper as full width and just the elements with a max-width limit?

Something like:

---

All here is open to discussion!

[damianmarti]

The issue with the DaisyUI drawers is that I think they can be opened to the left or right, and for the Receive and Send buttons I think we should open the drawer to the bottom of these buttons (because opening to the right I think it should be weird).

Maybe we can use a Collapse component for these two buttons (https://daisyui.com/components/collapse/) and use a Drawer for the settings.

[ChangoMan]

Opened an initial PR for a bottom drawer, using https://ui.shadcn.com/docs/components/drawer

As for the desktop view, we can make the wrapper full width no problem! Another option is to make the desktop view "confined" to a mobile layout.

https://bracket.game is a good example, the desktop view is confined and suggests that it's made for mobile. We could add a border around the layout and change the background color so that it's more "boxed in" like this.

[damianmarti]

I think we can start limiting the width on desktop, and then we can think of a better UI for desktop if we want.