Refactor Toast messages

[Traxmaxx]

Toasts are difficult to use and always need to be imported manually if not there already. We would like to address this and have one global instance where we would like to send notifications to. This requires some specific way of state handling or global state.

Our current Toast hook lives inside /dashboard/components/toast/hooks/useToast.tsx.
We would like to have one running instance of Toasts which we can keep on reusing. Similar to a singleton. Tha would allow us to just call setToast from wherever we want without need to always import {toast && <Toast {...toast} dismissToast={dismissToast} />} or pass down setToast multiple levels!

This needs to have some sort of state management for it to work like expected though. Let's brainstorm possible solutions in this Issue thread before implementation 🙏

Additional context
If you want to tackle this task, feel free to share with us your email address so we can give you access to the Figma project :)

[shavidze]

What about creating a context for it an wrapping the application ?
Another solution that comes to my mind is to use React Portals and this way render our Toasts.

[Traxmaxx]

What about creating a context for it an wrapping the application ? Another solution that comes to my mind is to use React Portals and this way render our Toasts.

That could certainly work!

[shavidze]

@Traxmaxx Can I take it?

[Traxmaxx]

@Traxmaxx Can I take it?

Absolutely, it is all yours!

[Traxmaxx]

Fixed in #1112