From d4e41821a6e6265e44bcb73e20733d4d6eef083f Mon Sep 17 00:00:00 2001
From: surbhi <surbhi.jhavar@gmail.com>
Date: Wed, 3 Dec 2025 17:43:17 -0400
Subject: [PATCH] adding reactivity and error message handling

---
 src/components/stake-form.tsx | 67 ++++++++++++++++++++++-------------
 src/components/swap-form.tsx  |  2 ++
 src/hooks/usePartyPlanner.ts  |  8 ++---
 3 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/components/stake-form.tsx b/src/components/stake-form.tsx
index 077aa82..258c9b8 100644
--- a/src/components/stake-form.tsx
+++ b/src/components/stake-form.tsx
@@ -173,7 +173,7 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
   }, [stakeAmount, selectedToken, mode]);
 
   // Fetch swap mint amounts (for stake mode)
-  const { swapMintAmounts, loading: swapMintLoading } = useSwapMintAmounts(
+  const { swapMintAmounts, loading: swapMintLoading, error: swapMintError } = useSwapMintAmounts(
     mode === 'stake' ? selectedPool?.address : undefined,
     mode === 'stake' ? inputTokenIndex : undefined,
     mode === 'stake' ? maxAmountIn : undefined,
@@ -181,7 +181,7 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
   );
 
   // Fetch burn swap amounts (for unstake mode, only when not redeeming all)
-  const { burnSwapAmounts, loading: burnSwapLoading } = useBurnSwapAmounts(
+  const { burnSwapAmounts, loading: burnSwapLoading, error: burnSwapError } = useBurnSwapAmounts(
     mode === 'unstake' && !redeemAll ? selectedPool?.address : undefined,
     mode === 'unstake' && !redeemAll ? maxAmountIn : undefined,
     mode === 'unstake' && !redeemAll ? inputTokenIndex : undefined,
@@ -726,36 +726,55 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
           </div>
         )}
 
+        {/* Error messages for output zero */}
+        {mode === 'stake' && swapMintError && stakeAmount && (
+          <div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <p className="text-sm text-destructive font-medium">⚠️ Cannot Process Stake</p>
+            <p className="text-xs text-destructive/80 mt-1">
+              {swapMintError}
+            </p>
+          </div>
+        )}
+
+        {mode === 'unstake' && !redeemAll && burnSwapError && stakeAmount && (
+          <div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <p className="text-sm text-destructive font-medium">⚠️ Cannot Process Unstake</p>
+            <p className="text-xs text-destructive/80 mt-1">
+              {burnSwapError}
+            </p>
+          </div>
+        )}
+
         {/* Slippage warnings - consolidated for both stake and unstake modes */}
-        {mode === 'stake' && slippageExceedsLimit && swapMintAmounts?.calculatedSlippage !== undefined && (
-          <SlippageWarning 
-            slippage={swapMintAmounts.calculatedSlippage} 
-            action="stake" 
-            isError={true} 
+        {mode === 'stake' && !swapMintError && slippageExceedsLimit && swapMintAmounts?.calculatedSlippage !== undefined && (
+          <SlippageWarning
+            slippage={swapMintAmounts.calculatedSlippage}
+            action="stake"
+            isError={true}
           />
         )}
 
-        {mode === 'stake' && !slippageExceedsLimit && slippageIsHigh && swapMintAmounts?.calculatedSlippage !== undefined && (
-          <SlippageWarning 
-            slippage={swapMintAmounts.calculatedSlippage} 
-            action="stake" 
-            isError={false} 
+        {mode === 'stake' && !swapMintError && !slippageExceedsLimit && slippageIsHigh && swapMintAmounts?.calculatedSlippage !== undefined && (
+          <SlippageWarning
+            slippage={swapMintAmounts.calculatedSlippage}
+            action="stake"
+            isError={false}
           />
         )}
 
-        {mode === 'unstake' && !redeemAll && unstakeSlippageExceedsLimit && burnSwapAmounts?.calculatedSlippage !== undefined && (
-          <SlippageWarning 
-            slippage={burnSwapAmounts.calculatedSlippage} 
-            action="unstake" 
-            isError={true} 
+        {mode === 'unstake' && !redeemAll && !burnSwapError && unstakeSlippageExceedsLimit && burnSwapAmounts?.calculatedSlippage !== undefined && (
+          <SlippageWarning
+            slippage={burnSwapAmounts.calculatedSlippage}
+            action="unstake"
+            isError={true}
           />
         )}
 
-        {mode === 'unstake' && !redeemAll && !unstakeSlippageExceedsLimit && slippageIsHigh && burnSwapAmounts?.calculatedSlippage !== undefined && (
-          <SlippageWarning 
-            slippage={burnSwapAmounts.calculatedSlippage} 
-            action="unstake" 
-            isError={false} 
+        {mode === 'unstake' && !redeemAll && !burnSwapError && !unstakeSlippageExceedsLimit && slippageIsHigh && burnSwapAmounts?.calculatedSlippage !== undefined && (
+          <SlippageWarning
+            slippage={burnSwapAmounts.calculatedSlippage}
+            action="unstake"
+            isError={false}
           />
         )}
 
@@ -807,10 +826,10 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
             !selectedPool ||
             isAmountExceedingBalance ||
             (mode === 'stake'
-              ? (!selectedToken || isSwapMinting || slippageExceedsLimit)
+              ? (!selectedToken || isSwapMinting || slippageExceedsLimit || !!swapMintError)
               : (redeemAll
                   ? isBurning
-                  : (!selectedToken || inputTokenIndex === undefined || isBurnSwapping || unstakeSlippageExceedsLimit)))
+                  : (!selectedToken || inputTokenIndex === undefined || isBurnSwapping || unstakeSlippageExceedsLimit || !!burnSwapError)))
           }
         >
           {!isConnected
diff --git a/src/components/swap-form.tsx b/src/components/swap-form.tsx
index b838d26..a91b566 100644
--- a/src/components/swap-form.tsx
+++ b/src/components/swap-form.tsx
@@ -94,6 +94,8 @@ export function SwapForm() {
       const swapResult = swapAmounts[0]; // Get the first (and should be only) result
       const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals);
       setToAmount(formattedAmount);
+    } else {
+      setToAmount('');
     }
   }, [swapAmounts, selectedToToken, hasInsufficientBalance]);
 
diff --git a/src/hooks/usePartyPlanner.ts b/src/hooks/usePartyPlanner.ts
index 17d6f54..81c38e0 100644
--- a/src/hooks/usePartyPlanner.ts
+++ b/src/hooks/usePartyPlanner.ts
@@ -656,7 +656,6 @@ export function useSwapMintAmounts(
 
           const basePrice = Number(poolPriceInt128) / (2 ** 64);
           poolPrice = 1 / (basePrice * Math.pow(10, 18 - inputTokenDecimals));
-
           // Calculate slippage
           const decimalsMultiplier = Math.pow(10, inputTokenDecimals);
           const lpMinted = Number(result[1]) / Math.pow(10, 18);
@@ -665,7 +664,6 @@ export function useSwapMintAmounts(
 
           const swapPrice = lpMinted / (amountIn - fee);
           calculatedSlippage = ((poolPrice - swapPrice) / poolPrice) * 100;
-
         } catch (priceErr) {
           console.error('Error fetching poolPrice or calculating slippage:', priceErr);
         }
@@ -678,7 +676,8 @@ export function useSwapMintAmounts(
         });
       } catch (err) {
         console.error('Error calling swapMintAmounts:', err);
-        setError(err instanceof Error ? err.message : 'Failed to fetch swap mint amounts');
+        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch swap mint amounts';
+        setError(errorMessage);
         setSwapMintAmounts(null);
       } finally {
         setLoading(false);
@@ -787,7 +786,8 @@ export function useBurnSwapAmounts(
         setBurnSwapAmounts(parsedAmounts);
       } catch (err) {
         console.error('Error calling burnSwapAmounts:', err);
-        setError(err instanceof Error ? err.message : 'Failed to fetch burn swap amounts');
+        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch burn swap amounts';
+        setError(errorMessage);
         setBurnSwapAmounts(null);
       } finally {
         setLoading(false);