Merge pull request #3551 from Emurgo/fix/YOEXT-1194/limit-data-state

reworked fetching pools for a selected pair in swap
Emurgo · Jun 19, 2024 · ec4a1fd · ec4a1fd
2 parents 47d0eed + 0aedc41
commit ec4a1fd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 34 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
@@ -13,7 +13,6 @@ import SelectSellTokenFromList from './edit-sell-amount/SelectSellTokenFromList'
 import EditSwapPool from './edit-pool/EditPool';
 import SelectSwapPoolFromList from './edit-pool/SelectPoolFromList';
 import SwapStore from '../../../stores/ada/SwapStore';
-import { useAsyncPools } from '../hooks';
 import { TopActions } from './actions/TopActions';
 import { MiddleActions } from './actions/MiddleActions';
 import { EditSlippage } from './actions/EditSlippage';
@@ -41,7 +40,6 @@ export const CreateSwapOrder = ({
 
   const {
     orderData: {
-      amounts: { sell, buy },
       type: orderType,
       selectedPoolCalculation,
     },
@@ -64,11 +62,6 @@ export const CreateSwapOrder = ({
     }
   }
 
-  // TODO: refactor, this hook call will be removed and replaced with store function
-  useAsyncPools(sell.tokenId, buy.tokenId)
-    .then(() => null)
-    .catch(() => null);
-
   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,19 @@ 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) {
+      pools.list.byPair({ tokenA: sellTokenId, tokenB: buyTokenId })
+        .then(poolsArray => poolPairsChanged(poolsArray))
+        .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);

diff --git a/packages/yoroi-extension/app/containers/swap/hooks.js b/packages/yoroi-extension/app/containers/swap/hooks.js
@@ -1,36 +1,13 @@
 //@flow
-import { useState } from 'react';
 import {
   useSwap,
   useSwapOrdersByStatusCompleted,
   useSwapOrdersByStatusOpen,
-  useSwapPoolsByPair,
   useSwapTokensOnlyVerified,
 } from '@yoroi/swap';
 import { Quantities } from '../../utils/quantities';
 import { useSwapForm } from './context/swap-form';
 import type { RemoteTokenInfo } from '../../api/ada/lib/state-fetch/types';
-import { runInAction } from 'mobx';
-
-export async function useAsyncPools(tokenA: string, tokenB: string): Promise<void> {
-  const { poolPairsChanged } = useSwap();
-  const [prevUsedPair, setPrevUsedPair] = useState<?string>(null);
-  const pair = `${tokenA}:${tokenB}`;
-  const isSamePair = prevUsedPair === pair;
-  useSwapPoolsByPair(
-    { tokenA, tokenB },
-    {
-      onSuccess: pools => {
-        if (!isSamePair) {
-          runInAction(() => {
-            setPrevUsedPair(pair);
-            poolPairsChanged(pools);
-          });
-        }
-      },
-    }
-  );
-}
 
 export function useSwapFeeDisplay(
   defaultTokenInfo: RemoteTokenInfo