Define constants for toast durations

[coderabbitai[bot]]

It's suggested to define constants for toast durations in the constants.ts file, for example, short toast: 1500ms and long toast: 3000ms, and use these constants across the app. This will help maintain consistency and ease of maintenance.

[kacpergumieniuk]

Any ideas , for what kind of actions should be short toast be used, and for what long toast? Are there any good ux practices for this?

[Klapeyron]

@coderabbitai full review

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

@Klapeyron, here's the full review:

Refactoring Toast Durations

To improve maintainability and consistency, I recommend defining constants for toast durations in a constants.ts file and using these constants throughout the codebase. For example:

// constants.ts
export const TOAST_DURATION_SHORT = 1500;
export const TOAST_DURATION_LONG = 4000;

You can then replace the hardcoded durations in your code with these constants. For instance:

import { TOAST_DURATION_SHORT, TOAST_DURATION_LONG } from '@/constants';

// Example usage
toast.success('Address copied to clipboard', {
  duration: TOAST_DURATION_SHORT,
});

toast.error('User rejected the transaction.', {
  duration: TOAST_DURATION_LONG,
});

UX Best Practices for Toast Durations

Based on UX best practices, here are some general guidelines for using short and long toast durations:

• Short Toast (e.g., 1500ms): Use for simple, non-critical notifications that do not require user action. Examples include:

  • Informing the user that an action was successful (e.g., "Address copied to clipboard").
  • Providing quick feedback for minor actions.

• Long Toast (e.g., 4000ms): Use for more important messages that the user needs to read but do not require immediate action. Examples include:

  • Error messages that explain why an action failed (e.g., "User rejected the transaction").
  • Notifications that provide more detailed information or require the user to be aware of something significant.

Would you like to proceed with these changes, or should we handle this enhancement separately via a GitHub issue as per your previous preference?

Analysis chain

Scripts executed

The following scripts were executed for the analysis: Script: ```shell #!/bin/bash # Find all occurrences of toast durations in the codebase to understand where and how they are used. rg 'toast' -A 5 ``` Length of output: 12537

---

Learnings added

``` Learnt from: Klapeyron URL: https://github.com/bigshortbets/market-frontend/issues/121 Timestamp: 2024-08-02T07:48:17.610Z Learning: When suggesting the use of constants for toast durations, the user prefers to push the current changes as they are and handle the enhancement separately via a GitHub issue. ``` > Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

---

Learnings used

``` Learnt from: kacpergumieniuk PR: bigshortbets/market-frontend#120 File: components/Leaderboard/LeaderboardItem.tsx:29-40 Timestamp: 2024-07-16T07:03:25.610Z Learning: When suggesting the use of constants for toast durations, the user prefers to push the current changes as they are and handle the enhancement separately via a GitHub issue. ```