UI options for different notifications (errors, warnings, info)

[ltfschoen]

Raised in discussion here https://github.com/paritytech/fether/pull/327#issuecomment-451031851

Currently for form validation errors we validate input form field values and use the react-final-form library to display errors as black tooltips over the relevant field with the issue so the user can pinpoint what needs to be fixed.

But some notifications are shown in a paragraph at the bottom, such as in AccountImportOptions.js, (i.e. 'The passphrase was not recognized ..., etc) and TxForm.js (i.e. WARNING: The sender and receiver addresses are the same.).

We also have other kinds of notifications (i.e. RequireHealthOverlay currently shows connection notifications to a user via a modal, and in future we could introduce push notifications or similar)

We are adopting SUI components using Semantic UI and with styled-components as a standard. Which of the following should we use? Could we just use toasters like Semantic UI Alert or similar for all notifications? Answer: Not for all notifications, see requirements mentioned in this thread

Semantic UI has:

• Messages https://react.semantic-ui.com/collections/message/#variations-info, including Info, Error, Warning, Success.
• Loading icon https://react.semantic-ui.com/collections/message/#types-icon.
• Nags https://semantic-ui.com/modules/nag.html
• React Semantic Toastr library https://www.npmjs.com/package/react-semantic-toasts
• Semantic UI Alert - https://diw112.github.io/semanticUiAlert/

Alternative notification libraries include:

• Noty https://github.com/needim/noty/pull/332
• React Notification https://github.com/pburtchaell/react-notification
• Toastr https://codeseven.github.io/toastr/
• React Toastify https://www.npmjs.com/package/react-toastify

[Tbaut]

I like the tool-tips for TxForm errors because they mention where the problem is. I think we could use a simple SUI alert showed for 5s for warning and global errors. idea:

(i.e. 'The passphrase was not recognized ..., etc)

This should be a tool tip IMO. Will create an issue for that. edit: it also makes sense for import errors

Warning (e.g for self sent ETH for instance) could be displayed in a similar manner

[ltfschoen]

Note the following requirements clarified in this discussion https://github.com/paritytech/fether/pull/326#issuecomment-451167992

When there's a bad connection, Parity's downloading, or there's no internet, or there's no peers, or it's syncing, then these are the requirements:

• Show a full modal on all screens that read/write blockchain state: tokens balances, send tx, etc.
• Don't show a modal on other screens (account management), only a green/yellow/red button