Implementing Toast Notifications for Text Copied and Wrong Input in Enigma Protocol Chatting Website

[Nishitbaria]

Description: Currently, our Enigma Protocol chatting website uses classic alert boxes for notifying users when text is copied successfully or when there is an error in the input. This approach disrupts the user experience and lacks the modern look and feel we want to achieve.

Expected Behavior: We would like to enhance the user experience by implementing toast notifications instead of classic alerts for the following scenarios:

1. When a user successfully copies text (e.g., user ID, messages) to the clipboard, display a toast notification confirming the action.
2. When a user enters incorrect input (e.g., invalid command), show a toast notification with an appropriate error message.

Screenshots

Proposed Solution:

1. Integrate toast notifications into our Enigma Protocol chatting website.
2. Define custom toast components for success and error notifications, ensuring they match the overall website theme and style.
3. Trigger toast notifications when the relevant events occur, such as successful text copying or input errors.
4. Customize the appearance and behavior of toast notifications, including duration, position, and visual design.
5. Implement logic to handle different scenarios and display appropriate messages for successful actions and errors.

UI/UX Considerations:

1. The toast notifications should be unobtrusive, appearing briefly and smoothly fading out to avoid interrupting the user's workflow.
2. Toast notifications should be visually appealing and match the overall design of the website.
3. Consider using different colors or icons to distinguish between success and error notifications.

Additional Notes:

• Ensure that the toast notifications are responsive and work well on various screen sizes and devices.
• Perform thorough testing to verify that the toast notifications work as expected across different browsers and platforms.

[Nishitbaria]

@PradyumnaKrishna ,please assign me this issue

[PradyumnaKrishna]

I guess this is one of the component what I looking in #37. You are welcome to implement this.

[PradyumnaKrishna]

Sorry, this was a duplicate but you are welcome to get assigned other issues.

[Nishitbaria]

@PradyumnaKrishna ,can you can tell me which issues i can work on?

[PradyumnaKrishna]

Look at this @Nishitbaria https://github.com/PradyumnaKrishna/enigma-protocol/issues/37#issuecomment-1633508015