adding insufficient balance error in the swap form

src/components/swap-form.tsx

@@ -60,17 +60,34 @@ export function SwapForm() {
     currentSlippage
   );
 
+  // Check if user has insufficient balance
+  const hasInsufficientBalance = useMemo(() => {
+    if (!selectedFromToken || !fromAmount || fromAmount === '') {
+      return false;
+    }
+    try {
+      const inputAmount = parseUnits(fromAmount, selectedFromToken.decimals);
+      return inputAmount > selectedFromToken.balance;
+    } catch {
+      return false;
+    }
+  }, [selectedFromToken, fromAmount]);
+
   // Initialize swap hook
   const { executeSwap, estimateGas, isSwapping, gasEstimate, isEstimatingGas } = useSwap();
 
   // Update "You Receive" amount when swap calculation completes
   useEffect(() => {
+    if (hasInsufficientBalance) {
+      setToAmount('');
+      return;
+    }
     if (swapAmounts && swapAmounts.length > 0 && selectedToToken) {
       const swapResult = swapAmounts[0]; // Get the first (and should be only) result
       const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals);
       setToAmount(formattedAmount);
     }
-  }, [swapAmounts, selectedToToken]);
+  }, [swapAmounts, selectedToToken, hasInsufficientBalance]);
 
   // Close dropdowns when clicking outside
   useEffect(() => {
@@ -346,6 +363,13 @@ export function SwapForm() {
           </div>
         )}
 
+        {/* Error message for insufficient balance */}
+        {hasInsufficientBalance && (
+          <div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <p className="text-sm text-destructive">Insufficient balance</p>
+          </div>
+        )}
+
         {/* Gas Estimate, Slippage, and Fees */}
         {isConnected && fromAmount && toAmount && (
           <div className="px-4 py-2 bg-muted/30 rounded-lg space-y-2">
@@ -384,10 +408,12 @@ export function SwapForm() {
         <Button
           className="w-full h-14 text-lg"
           onClick={() => setIsReviewModalOpen(true)}
-          disabled={!isConnected || !fromAmount || !toAmount || !!poolsError}
+          disabled={!isConnected || !fromAmount || !toAmount || !!poolsError || hasInsufficientBalance}
         >
           {!isConnected
             ? t('swap.connectWalletToSwap')
+            : hasInsufficientBalance
+            ? 'Insufficient Balance'
             : 'Review'}
         </Button>
       </CardContent>