reworked fetching pools for a selected pair in swap

Emurgo · Jun 18, 2024 · a576254 · a576254
1 parent 47d0eed
commit a576254
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 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,11 +13,12 @@ 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';
 import { useSwapForm } from '../context/swap-form';
+import { runInAction } from 'mobx';
+import type { State } from '../context/swap-form/types';
 
 type Props = {|
   slippageValue: string,
@@ -28,6 +29,25 @@ 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,
@@ -40,6 +60,7 @@ export const CreateSwapOrder = ({
   const [prevSelectedPoolId, setPrevSelectedPoolId] = useState<?string>(undefined);
 
   const {
+    pools,
     orderData: {
       amounts: { sell, buy },
       type: orderType,
@@ -48,9 +69,10 @@ export const CreateSwapOrder = ({
     // unsignedTxChanged,
     sellTokenInfoChanged,
     buyTokenInfoChanged,
+    poolPairsChanged,
   } = useSwap();
 
-  const { onChangeLimitPrice } = useSwapForm();
+  const { onChangeLimitPrice, selectedPairState } = useSwapForm();
 
   const resetLimitPrice = () => {
     onChangeLimitPrice('');
@@ -64,10 +86,13 @@ 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);
+  updatePoolsIfNeeded(
+    sell.tokenId,
+    buy.tokenId,
+    selectedPairState,
+    pools.list,
+    poolPairsChanged,
+  );
 
   return (
     <>

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
@@ -226,6 +226,7 @@ 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));
@@ -277,6 +278,7 @@ export default function SwapFormProvider({ swapStore, children }: Props): Node {
 
   const allActions = {
     ...actions,
+    selectedPairState,
     sellFocusState,
     buyFocusState,
     limitPriceFocusState,

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