moved the fetching of the swap pools into an effect

Emurgo · Jun 19, 2024 · f664c9b · f664c9b
1 parent a576254
commit f664c9b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 39 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
@@ -17,8 +17,6 @@ import { TopActions } from './actions/TopActions';
 import { MiddleActions } from './actions/MiddleActions';
 import { EditSlippage } from './actions/EditSlippage';
 import { useSwapForm } from '../context/swap-form';
-import { runInAction } from 'mobx';
-import type { State } from '../context/swap-form/types';
 
 type Props = {|
   slippageValue: string,
@@ -29,25 +27,6 @@ type Props = {|
   priceImpactState: ?PriceImpact,
 |};
 
-function updatePoolsIfNeeded<T>(
-  tokenA: string,
-  tokenB: string,
-  state: State<?string>,
-  api: {| byPair: ({| tokenA: string, tokenB: string |}) => Promise<T> |},
-  submit: T => void) {
-  if (tokenA != null && tokenB != null && tokenA !== tokenB) {
-    const pair = `${tokenA}:${tokenB}`;
-    if (pair !== state.value) {
-      runInAction(() => {
-        state.update(pair);
-      });
-      api.byPair({ tokenA, tokenB })
-        .then(pools => submit(pools))
-        .catch(err => console.warn(`Failed to fetch pools for pair: ${pair}`, err));
-    }
-  }
-}
-
 export const CreateSwapOrder = ({
   slippageValue,
   onSetNewSlippage,
@@ -60,19 +39,16 @@ export const CreateSwapOrder = ({
   const [prevSelectedPoolId, setPrevSelectedPoolId] = useState<?string>(undefined);
 
   const {
-    pools,
     orderData: {
-      amounts: { sell, buy },
       type: orderType,
       selectedPoolCalculation,
     },
     // unsignedTxChanged,
     sellTokenInfoChanged,
     buyTokenInfoChanged,
-    poolPairsChanged,
   } = useSwap();
 
-  const { onChangeLimitPrice, selectedPairState } = useSwapForm();
+  const { onChangeLimitPrice } = useSwapForm();
 
   const resetLimitPrice = () => {
     onChangeLimitPrice('');
@@ -86,14 +62,6 @@ export const CreateSwapOrder = ({
     }
   }
 
-  updatePoolsIfNeeded(
-    sell.tokenId,
-    buy.tokenId,
-    selectedPairState,
-    pools.list,
-    poolPairsChanged,
-  );
-
   return (
     <>
       <Box

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
@@ -1,9 +1,9 @@
 //@flow
 import type { Node } from 'react';
-import type { SwapFormAction, SwapFormState } from './types';
-import type { AssetAmount } from '../../../../components/swap/types';
 import { useCallback, useEffect, useReducer, useState } from 'react';
+import type { SwapFormAction, SwapFormState } from './types';
 import { StateWrap, SwapFormActionTypeValues } from './types';
+import type { AssetAmount } from '../../../../components/swap/types';
 import { useSwap } from '@yoroi/swap';
 import Context from './context';
 import { Quantities } from '../../../../utils/quantities';
@@ -21,6 +21,7 @@ const numberLocale = { decimalSeparator: '.' };
 
 export default function SwapFormProvider({ swapStore, children }: Props): Node {
   const {
+    pools,
     orderData,
     resetState,
     buyQuantityChanged,
@@ -29,10 +30,11 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
     switchTokens,
     resetQuantities,
     limitPriceChanged,
+    poolPairsChanged,
   } = useSwap();
 
-  const { quantity: buyQuantity } = orderData.amounts.buy;
-  const { quantity: sellQuantity } = orderData.amounts.sell;
+  const { quantity: sellQuantity, tokenId: sellTokenId } = orderData.amounts.sell;
+  const { quantity: buyQuantity, tokenId: buyTokenId } = orderData.amounts.buy;
 
   const swapFormReducer = (state: SwapFormState, action: SwapFormAction) => {
     const draft = { ...state };
@@ -148,9 +150,20 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
       });
     }
   }, []);
+
   // on unmount
   useEffect(() => () => actions.resetSwapForm(), []);
 
+  // on token pair changes
+  useEffect(() => {
+    if (sellTokenId != null && buyTokenId != null && sellTokenId !== buyTokenId) {
+      console.log('fetching pools for pair: ', sellTokenId, buyTokenId);
+      pools.list.byPair({ tokenA: sellTokenId, tokenB: buyTokenId })
+        .then(pools => poolPairsChanged(pools))
+        .catch(err => console.error(`Failed to fetch pools for pair: ${sellTokenId}/${buyTokenId}`, err));
+    }
+  }, [sellTokenId, buyTokenId]);
+
   const clearErrors = useCallback(() => {
     if (swapFormState.sellQuantity.error != null) actions.sellAmountErrorChanged(null);
     if (swapFormState.buyQuantity.error != null) actions.buyAmountErrorChanged(null);
@@ -226,7 +239,6 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
     [actions, clearErrors, orderData.tokens.priceDenomination, limitPriceChanged, numberLocale]
   );
 
-  const selectedPairState = StateWrap<?string>(useState(null));
   const sellFocusState = StateWrap<boolean>(useState(false));
   const buyFocusState = StateWrap<boolean>(useState(false));
   const limitPriceFocusState = StateWrap<boolean>(useState(false));
@@ -278,7 +290,6 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
 
   const allActions = {
     ...actions,
-    selectedPairState,
     sellFocusState,
     buyFocusState,
     limitPriceFocusState,