removed state-updating logic from component render. Moved it to be an…

… effect
Emurgo · Jun 20, 2024 · 814bc1d · 814bc1d
1 parent d1dd8f4
commit 814bc1d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 24 deletions.
diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/CreateSwapOrder.js b/packages/yoroi-extension/app/containers/swap/asset-swap/CreateSwapOrder.js
@@ -38,32 +38,17 @@ export const CreateSwapOrder = ({
   priceImpactState,
 }: Props): React$Node => {
   const [openedDialog, setOpenedDialog] = useState('');
-  const [prevSelectedPoolId, setPrevSelectedPoolId] = useState<?string>(undefined);
 
   const {
     orderData: {
       type: orderType,
-      selectedPoolCalculation,
     },
-    // unsignedTxChanged,
     sellTokenInfoChanged,
     buyTokenInfoChanged,
   } = useSwap();
 
   const { onChangeLimitPrice } = useSwapForm();
 
-  const resetLimitPrice = () => {
-    onChangeLimitPrice('');
-  };
-
-  if (orderType === 'market') {
-    const selectedPoolId = selectedPoolCalculation?.pool.poolId;
-    if (selectedPoolId !== prevSelectedPoolId) {
-      setPrevSelectedPoolId(selectedPoolId);
-      resetLimitPrice();
-    }
-  }
-
   return (
     <>
       <Box
@@ -117,7 +102,7 @@ export const CreateSwapOrder = ({
           store={swapStore}
           onClose={() => setOpenedDialog('')}
           onTokenInfoChanged={val => {
-            resetLimitPrice();
+            onChangeLimitPrice();
             sellTokenInfoChanged(val);
           }}
           defaultTokenInfo={defaultTokenInfo}
@@ -129,7 +114,7 @@ export const CreateSwapOrder = ({
           store={swapStore}
           onClose={() => setOpenedDialog('')}
           onTokenInfoChanged={val => {
-            resetLimitPrice();
+            onChangeLimitPrice();
             buyTokenInfoChanged(val);
           }}
           defaultTokenInfo={defaultTokenInfo}

diff --git a/packages/yoroi-extension/app/containers/swap/context/swap-form/SwapFormProvider.js b/packages/yoroi-extension/app/containers/swap/context/swap-form/SwapFormProvider.js
@@ -10,6 +10,7 @@ import { Quantities } from '../../../../utils/quantities';
 import SwapStore from '../../../../stores/ada/SwapStore';
 import { defaultSwapFormState } from './DefaultSwapFormState';
 import { PRICE_PRECISION } from '../../../../components/swap/common';
+import { runInAction } from 'mobx';
 // const PRECISION = 14;
 
 type Props = {|
@@ -208,10 +209,6 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
     actions.buyInputValueChanged(input);
   };
 
-  const limitPriceUpdateHandler = ({ input }) => {
-    actions.limitPriceInputValueChanged(input);
-  };
-
   const onChangeSellQuantity = useCallback(
     baseSwapFieldChangeHandler(swapFormState.sellTokenInfo, sellUpdateHandler),
     [sellQuantityChanged, actions, clearErrors]
@@ -223,7 +220,7 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
   );
 
   const onChangeLimitPrice = useCallback(
-    text => {
+    (text = '') => {
       const [formattedPrice, price] = Quantities.parseFromText(
         text,
         orderData.tokens.priceDenomination,
@@ -238,6 +235,13 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
     [actions, clearErrors, orderData.tokens.priceDenomination, limitPriceChanged, numberLocale]
   );
 
+  // on selected best pool changes
+  useEffect(() => {
+    if (orderData.type === 'market') {
+      onChangeLimitPrice();
+    }
+  }, [orderData.selectedPoolCalculation?.pool.poolId]);
+
   const sellFocusState = StateWrap<boolean>(useState(false));
   const buyFocusState = StateWrap<boolean>(useState(false));
   const limitPriceFocusState = StateWrap<boolean>(useState(false));
@@ -266,15 +270,15 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
         PRICE_PRECISION
       );
 
-      limitPriceUpdateHandler({ input: formatted });
+      actions.limitPriceInputValueChanged(formatted);
     } else if (orderData.type === 'market') {
       const formatted = Quantities.format(
         orderData.selectedPoolCalculation?.prices.market ?? Quantities.zero,
         orderData.tokens.priceDenomination,
         PRICE_PRECISION
       );
 
-      limitPriceUpdateHandler({ input: formatted });
+      actions.limitPriceInputValueChanged(formatted);
     }
   }, [
     orderData.tokens.priceDenomination,