Merge pull request #48 from dhruvi-16-me/fix/swap-preserve-amounts

fix(swap): preserve and recalculate amounts when swapping tokens

Author: kaneki003

components/swap/swap-interface.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TokenSelector } from "@/components/swap/token-selector";
 import { SwapPreviewModal } from "@/components/swap/swap-preview-modal";
@@ -67,6 +67,9 @@ export function SwapInterface() {
   const [slippageTolerance, setSlippageTolerance] = useState<number>(0); // Start at 0 for zero slippage mode
   const [validationError, setValidationError] = useState<string>("");
   const [zeroSlippageMode, setZeroSlippageMode] = useState<boolean>(true); // Default to zero slippage mode
+  const swapJustHappenedRef = useRef(false);
+  const tokenInSellPriceForRef = useRef<Token | null>(null);
+  const tokenOutBuyPriceForRef = useRef<Token | null>(null);
 
   const calculateOutput = (amount: string, isInput: boolean) => {
     setValidationError("");
@@ -183,6 +186,7 @@ export function SwapInterface() {
       const newExchangeRate = tokenOutBuyPrice / newSellPrice;
 
       setTokenInSellPrice(newSellPrice);
+      tokenInSellPriceForRef.current = token;
       setEthInReserve(reserve?.ethReserve);
 
       setSwapState((prev) => {
@@ -222,6 +226,7 @@ export function SwapInterface() {
       const newExchangeRate = newBuyPrice / tokenInSellPrice;
       setTokenOutReserve(reserve?.tokenReserve);
       setTokenOutBuyPrice(newBuyPrice);
+      tokenOutBuyPriceForRef.current = token;
 
       setSwapState((prev) => {
         const formattedExchangeRate =
@@ -250,20 +255,19 @@ export function SwapInterface() {
     setIsSwapping(true);
     setValidationError(""); // Clear validation error when swapping
     try {
-      // Store the current tokens before swapping
       const currentTokenIn = swapState.tokenIn;
       const currentTokenOut = swapState.tokenOut;
 
-      // Swap the tokens in state first
+      // Swap tokens but preserve amounts; recalc will run after rates update (useEffect)
       setSwapState((prev) => ({
+        ...prev,
         tokenIn: prev.tokenOut,
         tokenOut: prev.tokenIn,
-        amountIn: "",
-        amountOut: "",
-        exchangeRate: prev.exchangeRate, // Keep current rate temporarily
+        // Keep amountIn/amountOut so we can recalc for new direction after prices load
       }));
+      swapJustHappenedRef.current = true;
 
-      // Now update the exchange rates for the swapped tokens
+      // Update exchange rates for the swapped tokens (async)
       await handletokenInChange(currentTokenOut);
       await handletokenOutChange(currentTokenIn);
     } catch (error) {
@@ -273,6 +277,21 @@ export function SwapInterface() {
     }
   };
 
+  // After swap, recalc the other amount only when both prices match the current token pair
+  useEffect(() => {
+    if (!swapJustHappenedRef.current) return;
+    if (!swapState.tokenIn || !swapState.tokenOut || !tokenInSellPrice || !tokenOutBuyPrice) return;
+    const sellPriceForCurrentIn = tokenInSellPriceForRef.current?.address === swapState.tokenIn?.address;
+    const buyPriceForCurrentOut = tokenOutBuyPriceForRef.current?.address === swapState.tokenOut?.address;
+    if (!sellPriceForCurrentIn || !buyPriceForCurrentOut) return;
+    swapJustHappenedRef.current = false;
+    if (swapState.amountIn) {
+      setSwapState((prev) => ({ ...prev, amountOut: calculateOutput(prev.amountIn, true) }));
+    } else if (swapState.amountOut) {
+      setSwapState((prev) => ({ ...prev, amountIn: calculateOutput(prev.amountOut, false) }));
+    }
+  }, [swapState.tokenIn, swapState.tokenOut, tokenInSellPrice, tokenOutBuyPrice, swapState.amountIn, swapState.amountOut]);
+
   const handlePreviewSwap = () => {
     if (
       !swapState.amountIn ||