Notification toasts are displayed on top of each other

[Tbaut]

Description
When several notification toasts are displayed, they are overlaying each other

Steps To Reproduce

Add clear steps on how to reproduce the bug

1. Go to Multix at 'https://multix.chainsafe.io/'
2. Initiate a balance transfer
3. When prompted to sign the extrinsic with the extension, cancel it. This will create a toast with the status "error". Toasts error are set to not auto-disappear, this is fine

   Multix/ui/src/components/ToastBar.tsx

   Lines 29 to 30 in 867fe5a

   	autoHideDuration={toast.type === "error" ? null : 6000}
   	onClose={handleClose}

4. Now if you don't click on the small cross to close it, any other toast will appear on top of it.

Bellow is a screenshot with a long error toast, and a "Tx broadcasted" toast on top of it.

Expected Behaviour
the toasts should ideally stack on top of each other.

Screenshots / Video

[dj-pundir]

Hey @Tbaut Let me know if I can help you with this. Thanks!!

[Tbaut]

Sure, thanks :)

[dj-pundir]

Hey @Tbaut It is not possible to stack the chart with MUI Snackbar. Though they are working on it, once its done we will be able to do that
mui/material-ui#31991

Alternative of this we can use which most of the user used and it seems an alternative by looking at the number of downloads:
https://www.npmjs.com/package/notistack

The original issue of stacking is here
mui/material-ui#1824

Thanks!!

[Tbaut]

Notistack is mentioned in the MUI doc yes: https://mui.com/material-ui/react-snackbar/#complementary-projects
We should either use it, or make it work anyhow.

[dj-pundir]

Hey @Tbaut I have created customized toast. Here is the sample. Let me know if it works for you.

screen-recorder-tue-may-02-2023-17-59-29.webm

It uses MUI Alert where we have 4 options for toast colors. Please check here http://127.0.0.1:3333/create?network=rococo

[Tbaut]

Please submit a pr, the URL you gave is local.

[dj-pundir]

Hey @Tbaut I have come with a solution where i have used old logic to generate the toast but using notistack as a base so the look and feel will be same for toast but its stacked up the toasts. Thanks!!