feat: add dynamic high-slippage warning banner with two-tier alert (Closes #111)

- Lower SLIPPAGE_WARNING_THRESHOLD from 5% to 2% so users are
  warned earlier about sandwich-attack risk
- Add two-tier warning styling:
  - Amber/yellow for 2-10%: 'High slippage warning'
  - Red for >10%: 'Extreme slippage — high risk'
- Improve warning text to explain MEV sandwich attack risks
  and poor execution prices
- Add unit tests for the updated constants and thresholds [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT]

Author: waterWang

components/SlippageSettings.tsx

@@ -6,6 +6,7 @@ import { useUserSettingsStore, type SlippageValue } from '@/lib/store/userSettin
 import {
   PRESET_SLIPPAGE_VALUES,
   SLIPPAGE_WARNING_THRESHOLD,
+  SLIPPAGE_MAX,
   validateSlippageInput,
   isSlippageRisky
 } from '@/lib/store/userSettingsStore';
@@ -280,21 +281,38 @@ export function SlippageSettings() {
 
           {/* Risk warning banner */}
           {risky && (
-            <div className="mx-4 mb-4 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 dark:border-amber-800 dark:bg-amber-950/40">
+            <div className={`mx-4 mb-4 rounded-md border px-3 py-2 ${
+              slippage > 10
+                ? 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/40'
+                : 'border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/40'
+            }`}>
               <div className="flex items-start gap-2">
                 <AlertTriangle
                   size={14}
                   aria-hidden="true"
-                  className="mt-0.5 shrink-0 text-amber-600 dark:text-amber-400"
+                  className={`mt-0.5 shrink-0 ${
+                    slippage > 10
+                      ? 'text-red-600 dark:text-red-400'
+                      : 'text-amber-600 dark:text-amber-400'
+                  }`}
                 />
                 <div>
-                  <p className="text-xs font-medium text-amber-800 dark:text-amber-300">
-                    High slippage warning
+                  <p className={`text-xs font-medium ${
+                    slippage > 10
+                      ? 'text-red-800 dark:text-red-300'
+                      : 'text-amber-800 dark:text-amber-300'
+                  }`}>
+                    {slippage > 10 ? 'Extreme slippage — high risk' : 'High slippage warning'}
                   </p>
-                  <p className="mt-0.5 text-xs text-amber-700 dark:text-amber-400">
-                    Setting slippage above {SLIPPAGE_WARNING_THRESHOLD}% puts
-                    you at high risk of sandwich attacks. Consider a lower
-                    value.
+                  <p className={`mt-0.5 text-xs ${
+                    slippage > 10
+                      ? 'text-red-700 dark:text-red-400'
+                      : 'text-amber-700 dark:text-amber-400'
+                  }`}>
+                    {slippage > 10
+                      ? `Setting slippage above 10% exposes you to extreme MEV sandwich attacks and near-total loss of funds. Consider a much lower value.`
+                      : `Setting slippage above ${SLIPPAGE_WARNING_THRESHOLD}% puts you at risk of sandwich attacks and poor execution prices. Consider a lower value.`
+                    }
                   </p>
                 </div>
               </div>

lib/store/userSettingsStore.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest';
+import {
+  DEFAULT_SLIPPAGE,
+  PRESET_SLIPPAGE_VALUES,
+  SLIPPAGE_WARNING_THRESHOLD,
+  SLIPPAGE_MAX,
+  SLIPPAGE_MIN,
+  validateSlippageInput,
+  isSlippageRisky
+} from './userSettingsStore';
+
+describe('constants', () => {
+  it('has a default slippage of 0.5 %', () => {
+    expect(DEFAULT_SLIPPAGE).toBe(0.5);
+  });
+
+  it('has preset values [0.1, 0.5, 1.0]', () => {
+    expect(PRESET_SLIPPAGE_VALUES).toEqual([0.1, 0.5, 1.0]);
+  });
+
+  it('has a warning threshold of 2 %', () => {
+    expect(SLIPPAGE_WARNING_THRESHOLD).toBe(2);
+  });
+
+  it('has a max of 50 %', () => {
+    expect(SLIPPAGE_MAX).toBe(50);
+  });
+
+  it('has a min of 0 %', () => {
+    expect(SLIPPAGE_MIN).toBe(0);
+  });
+});
+
+describe('validateSlippageInput', () => {
+  it('rejects empty input', () => {
+    const result = validateSlippageInput('');
+    expect(result.valid).toBe(false);
+    if (!result.valid) expect(result.message).toContain('empty');
+  });
+
+  it('rejects bare dot', () => {
+    const result = validateSlippageInput('.');
+    expect(result.valid).toBe(false);
+  });
+
+  it('rejects multiple dots', () => {
+    const result = validateSlippageInput('1.2.3');
+    expect(result.valid).toBe(false);
+  });
+
+  it('rejects negative values', () => {
+    const result = validateSlippageInput('-1');
+    expect(result.valid).toBe(false);
+  });
+
+  it('rejects values above max', () => {
+    const result = validateSlippageInput('51');
+    expect(result.valid).toBe(false);
+    if (!result.valid) expect(result.message).toContain('50');
+  });
+
+  it('accepts 0', () => {
+    expect(validateSlippageInput('0').valid).toBe(true);
+  });
+
+  it('accepts 0.5', () => {
+    expect(validateSlippageInput('0.5').valid).toBe(true);
+  });
+
+  it('accepts 50 (the max)', () => {
+    expect(validateSlippageInput('50').valid).toBe(true);
+  });
+
+  it('accepts trailing decimal point (in-progress edit)', () => {
+    expect(validateSlippageInput('5.').valid).toBe(true);
+  });
+});
+
+describe('isSlippageRisky', () => {
+  it('returns false for default slippage (0.5 %)', () => {
+    expect(isSlippageRisky(0.5)).toBe(false);
+  });
+
+  it('returns false for 1 %', () => {
+    expect(isSlippageRisky(1)).toBe(false);
+  });
+
+  it('returns false for exactly the threshold (2 % — not yet risky)', () => {
+    expect(isSlippageRisky(SLIPPAGE_WARNING_THRESHOLD)).toBe(false);
+  });
+
+  it('returns true for 3 % (above threshold)', () => {
+    expect(isSlippageRisky(3)).toBe(true);
+  });
+
+  it('returns true for 5 %', () => {
+    expect(isSlippageRisky(5)).toBe(true);
+  });
+
+  it('returns true for 10 %', () => {
+    expect(isSlippageRisky(10)).toBe(true);
+  });
+
+  it('returns true for 50 % (the max)', () => {
+    expect(isSlippageRisky(SLIPPAGE_MAX)).toBe(true);
+  });
+
+  it('returns false for values above max (clamped by store)', () => {
+    expect(isSlippageRisky(51)).toBe(false);
+  });
+});

lib/store/userSettingsStore.ts

@@ -26,7 +26,7 @@ export const DEFAULT_SLIPPAGE: SlippageValue = 0.5;
 export const PRESET_SLIPPAGE_VALUES: SlippageValue[] = [0.1, 0.5, 1.0];
 
 /** Anything above this is considered risky (sandwich-attack territory). */
-export const SLIPPAGE_WARNING_THRESHOLD = 5;
+export const SLIPPAGE_WARNING_THRESHOLD = 2;
 
 /** Hard upper bound — values above this are rejected by validation. */
 export const SLIPPAGE_MAX = 50;