Skip to content

ux: Implement dynamic Price Impact color warnings #89

@AlAfiz

Description

@AlAfiz

Description

Users don't always read the small text for Price Impact when executing a trade. We need to use color psychology to warn them of bad trades.
The percentage text should dynamically change color based on how severe the impact is.
This gives instant, peripheral visual feedback that a trade might be dangerous.
It is a standard DeFi feature that prevents angry users from losing funds to slippage.

Requirements

  • Locate the "Price Impact" display inside the main Swap card component.
  • Add logic to check the priceImpact value.
  • If < 1%, apply a green Tailwind class (text-emerald-400).
  • If >= 1% and < 3%, apply a yellow warning class (text-yellow-400).
  • If >= 3%, apply a bold red danger class (text-red-500).

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave program

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions