Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

reworked fetching pools for a selected pair in swap #3551

Merged
merged 4 commits into from
Jun 19, 2024
Merged

reworked fetching pools for a selected pair in swap #3551

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a576254
reworked fetching pools for a selected pair in swap
vsubhuman Jun 18, 2024
f664c9b
moved the fetching of the swap pools into an effect
vsubhuman Jun 19, 2024
d65e1ed
lint fix
vsubhuman Jun 19, 2024
0aedc41
removed console log
vsubhuman Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions packages/yoroi-extension/app/containers/swap/asset-swap/CreateSwapOrder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -41,7 +40,6 @@ export const CreateSwapOrder = ({

const {
orderData: {
amounts: { sell, buy },
type: orderType,
selectedPoolCalculation,
},
Expand All @@ -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
Expand Down
21 changes: 17 additions & 4 deletions packages/yoroi-extension/app/containers/swap/context/swap-form/SwapFormProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -21,6 +21,7 @@ const numberLocale = { decimalSeparator: '.' };

export default function SwapFormProvider({ swapStore, children }: Props): Node {
const {
pools,
orderData,
resetState,
buyQuantityChanged,
Expand All @@ -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 };
Expand Down Expand Up @@ -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);
Expand Down
23 changes: 0 additions & 23 deletions packages/yoroi-extension/app/containers/swap/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Loading