From d81abc4f374cde5b675a25675fc779be2a69188d Mon Sep 17 00:00:00 2001
From: tebrihk <baremtebrihk@gmail.com>
Date: Sun, 29 Mar 2026 00:15:43 +0100
Subject: [PATCH] dynamic Price Impact color warnings

---
 src/components/SwapInterface.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/SwapInterface.tsx b/src/components/SwapInterface.tsx
index 9dfdae5..9a040f2 100644
--- a/src/components/SwapInterface.tsx
+++ b/src/components/SwapInterface.tsx
@@ -144,15 +144,15 @@ export default function SwapInterface() {
     setIsTradeReviewOpen(false);
     setIsSubmitting(true);
     setSubmissionStartTime(Date.now());
-    
+
     try {
       // Simulate transaction submission
       await new Promise(resolve => setTimeout(resolve, 2000));
-      
+
       // Generate mock transaction XDR
       const mockTransactionXDR = "AAAAAK/eFzA7Jf5Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3Xf3XAAAABQAAAAAAAAAAA==";
       console.log("Mock XDR generated:", mockTransactionXDR);
-      
+
       setIsTransactionSignatureOpen(true);
     } catch (error) {
       toast.error("Failed to submit trade");
@@ -205,6 +205,17 @@ export default function SwapInterface() {
   // Check if swap is valid
   const isSwapValid = fromAmount && parseFloat(fromAmount) > 0 && !isSubmitting;
 
+  // Dynamic Price Impact color logic
+  const getPriceImpactColor = () => {
+    if (priceImpact < 1) {
+      return "text-emerald-400"; // Green for low impact (< 1%)
+    } else if (priceImpact >= 1 && priceImpact < 3) {
+      return "text-yellow-400"; // Yellow for medium impact (1% - 3%)
+    } else {
+      return "text-red-500 font-bold"; // Red for high impact (>= 3%)
+    }
+  };
+
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -318,7 +329,7 @@ export default function SwapInterface() {
                 Price Impact
               </span>
             </Tooltip>
-            <span className={`${priceImpact > 5 ? "text-red-500 font-bold" : "text-slate-200"}`}>
+            <span className={getPriceImpactColor()}>
               {priceImpact.toFixed(2)}%
             </span>
           </div>