diabling swab button if slippage exceed 5%

src/components/swap-form.tsx

@@ -73,6 +73,14 @@ export function SwapForm() {
     }
   }, [selectedFromToken, fromAmount]);
 
+  // Check if calculated slippage exceeds 5%
+  const slippageExceedsLimit = useMemo(() => {
+    if (!swapAmounts || swapAmounts.length === 0 || swapAmounts[0].calculatedSlippage === undefined) {
+      return false;
+    }
+    return Math.abs(swapAmounts[0].calculatedSlippage) > 5;
+  }, [swapAmounts]);
+
   // Initialize swap hook
   const { executeSwap, estimateGas, isSwapping, gasEstimate, isEstimatingGas } = useSwap();
 
@@ -370,9 +378,20 @@ export function SwapForm() {
           </div>
         )}
 
-        {/* High slippage warning - show if calculated slippage exceeds max slippage OR 5% */}
+        {/* Error message for slippage exceeding 5% */}
-        {swapAmounts && swapAmounts.length > 0 && swapAmounts[0].calculatedSlippage !== undefined && (
+        {slippageExceedsLimit && (
-          Math.abs(swapAmounts[0].calculatedSlippage) > Math.max(currentSlippage, 5)
+          <div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <p className="text-sm text-destructive font-medium">⚠️ Slippage Exceeds 5%</p>
+            <p className="text-xs text-destructive/80 mt-1">
+              The estimated slippage for this swap is {Math.abs(swapAmounts![0].calculatedSlippage!).toFixed(2)}%.
+              We cannot process this swap as you may lose too much money due to the high slippage.
+            </p>
+          </div>
+        )}
+
+        {/* High slippage warning - show if calculated slippage exceeds max slippage but is under 5% */}
+        {!slippageExceedsLimit && swapAmounts && swapAmounts.length > 0 && swapAmounts[0].calculatedSlippage !== undefined && (
+          Math.abs(swapAmounts[0].calculatedSlippage) > currentSlippage
         ) && (
           <div className="px-4 py-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
             <p className="text-sm text-yellow-600 dark:text-yellow-500 font-medium">⚠️ High Slippage Warning</p>
@@ -420,12 +439,14 @@ export function SwapForm() {
         <Button
           className="w-full h-14 text-lg"
           onClick={() => setIsReviewModalOpen(true)}
-          disabled={!isConnected || !fromAmount || !toAmount || !!poolsError || hasInsufficientBalance}
+          disabled={!isConnected || !fromAmount || !toAmount || !!poolsError || hasInsufficientBalance || slippageExceedsLimit}
         >
           {!isConnected
             ? t('swap.connectWalletToSwap')
             : hasInsufficientBalance
             ? 'Insufficient Balance'
+            : slippageExceedsLimit
+            ? 'Slippage Too High'
             : 'Review'}
         </Button>
       </CardContent>