Quick research about libraries for displayin messages for user

[alfetopito]

Description: Determine how to display messages to users. Research how other projects do it, inspect existing libraries. Implement a simple POC using the chosen method and submit a PR for review by the team.

Estimation: 1

[alfetopito]

Several useful resources here https://github.com/brillout/awesome-react-components#notification

Liked:

• https://fkhadra.github.io/react-toastify/
• https://cogoport.github.io/cogo-toast/

From inside Gnosis, the PM team has a custom component: https://github.com/gnosis/conditional-markets-interface/blob/master/app/src/components/Toasts.js Using it here

Will try them out.

[anxolin]

Nice! I also like both of them. I like slightly more Cogo design, it's more simple. But I would go with toasts cause I like the thing about the timer that stops when you hover your mouse.

We'll need something also for the confirmations (maybe a modal library).

[alfetopito]

Design wise, both can be customized with CSS.

As for confirmations, you mean a sort of pop-up window?

[alfetopito]

For modals, I liked these 2:

• https://upmostly.github.io/modali/
• http://marcio.github.io/react-skylight/

Will take a look at them as well. The main thing that I'm looking for is the integration with Typescript and customization options.

[alfetopito]

Spent some time on modali, had to get the typescript type definitions for it. The issue now is that I don't seem to have a way to pass in additional info to the modal. Unless this is something very basic and I'm missing it.

In the mean time I'll try other modals. This one seems promising http://davidtheclark.github.io/react-aria-modal/demo/. Has type definitions already!

[alfetopito]

Yeah, nevermind. I was indeed missing something basic. The string literals (facepalm)...

[alfetopito]

Added both libs (toast and modal) on this draft PR https://github.com/gnosis/dex-react/pull/62

[anxolin]

To pass in additional info to the modal

You mean pass this props? https://github.com/Upmostly/modali#props

The string literals

You mean the spread syntax?

modaly looks good enough, but if you want to look for the other in case is more convenient, go for it :)

[alfetopito]

To pass in additional info to the modal

You mean pass this props? https://github.com/Upmostly/modali#props

No, I meant passing for example the token symbol into the Modal.

The string literals

You mean the spread syntax?

Actually, I meant https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

modaly looks good enough, but if you want to look for the other in case is more convenient, go for it :)

modali was my favorite. Pretty simple and fully built on react hooks. Got it working now :)

[anxolin]

No, I meant passing for example the token symbol into the Modal.

But the modal accept an arbitrary react component, so you can add any content you want, no need to use the template literals (or maybe I'm missing sth here)

Nice to hear that now is working!