Display dynamic warning banner when users select high slippage tolerance

[Lakes41]

Difficulty: Intermediate
Type: UI/UX, feature

Background

Users can manually adjust their transaction slippage tolerance in the settings menu. By default, it is set to a safe 0.5%.

Problem

Users occasionally set their slippage extremely high (e.g., >5%) to force a failing transaction through, exposing themselves to severe front-running and MEV bot attacks (sandwiching) without understanding the risk.

Expected outcome

The UI actively detects when slippage exceeds a dangerous threshold (e.g., >2%) and displays a highly visible warning banner explaining the risk of financial loss.

Suggested implementation

1. Modify the SettingsModal component to track the slippage input state in real-time.
2. Conditionally render a warning styled component (e.g., yellow/red border, warning icon) beneath the input if the value > 2%.
3. Add a strict block preventing inputs greater than 50% entirely.

Acceptance criteria

• Warning message appears instantly when slippage > 2%.
• The warning clearly explains the risk of MEV attacks/bad execution prices.
• UI prevents confirming a slippage > 50%.

Likely affected files/directories

• src/components/Settings/SlippageInput.tsx

Requirements

• The warning banner must be responsive and not break the modal's vertical constraints.

[mrmoney10010-design]

Hi! I'd like to work on this issue.

I'll update the SlippageInput component to monitor slippage in real time, display a clear warning banner whenever the value exceeds 2%, and explain the risks of MEV attacks and unfavorable execution prices. I'll also enforce a hard maximum of 50% slippage, ensure the warning is fully responsive within the settings modal, and add or update tests to verify the validation and UI behavior.