Merge pull request #43 from multiversx/development

2.1.4

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[2.1.4](https://github.com/multiversx/mx-sdk-dapp-swap/pull/43)] - 2025-01-14
+
+- [Fixed swap calculation when first amount was entered before second token](https://github.com/multiversx/mx-sdk-dapp-swap/pull/42)
+
 ## [[2.1.3](https://github.com/multiversx/mx-sdk-dapp-swap/pull/41)] - 2024-12-04
 
 - [Progressive Fetching for Tokens](https://github.com/multiversx/mx-sdk-dapp-swap/pull/40)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-swap",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A library to hold the main logic for swapping between tokens on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

src/hooks/index.ts

@@ -12,3 +12,4 @@ export * from './useSwapFormHandlers';
 export * from './useInputAmountUsdValue';
 export * from './useFetchMaintenanceFlag';
 export * from './useIntersectionObserver';
+export * from './usePrevious';

src/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+
+export const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T | undefined>(undefined);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};

src/hooks/useSwapFormHandlers.ts

@@ -10,6 +10,7 @@ import {
   getCorrectAmountsOnTokenChange
 } from 'utils';
 import { useInputAmountUsdValue } from './useInputAmountUsdValue';
+import { usePrevious } from './usePrevious';
 import { GetSwapRouteType } from './useSwapRoute';
 
 type SwapFormStateType = {
@@ -39,6 +40,7 @@ export const useSwapFormHandlers = ({
   const [activeRoute, setActiveRoute] = useState<SwapRouteType>();
   const isSwitching = useRef<boolean>();
   const lastInputTouched = useRef<InputTouchedEnum>();
+  const prevSecondToken = usePrevious(formState.secondToken);
 
   const inputAmountsUsdValue = useInputAmountUsdValue({
     swapRoute: activeRoute,
@@ -254,6 +256,10 @@ export const useSwapFormHandlers = ({
         secondToken: option
       };
     });
+
+    if (!prevSecondToken && formState.firstAmount) {
+      handleOnChangeFirstAmount(formState.firstAmount);
+    }
   };
 
   const handleOnFirstMaxBtnChange = () => {