fix: refresh exchange rate when token pair changed

This commit is contained in:
Kyle Fang
2023-09-06 10:34:42 +08:00
parent d2af879a03
commit f570fe3176
4 changed files with 23 additions and 4 deletions

View File

@@ -25,6 +25,7 @@ export function SwapAmountField({ amountAsFiat, isDisabled, name }: SwapAmountFi
const value = event.currentTarget.value; const value = event.currentTarget.value;
const { swapAssetFrom, swapAssetTo } = values; const { swapAssetFrom, swapAssetTo } = values;
if (swapAssetFrom != null && swapAssetTo && !isNaN(Number(value))) { if (swapAssetFrom != null && swapAssetTo && !isNaN(Number(value))) {
await setFieldValue('swapAmountTo', '');
const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, value); const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, value);
await setFieldValue('swapAmountTo', toAmount); await setFieldValue('swapAmountTo', toAmount);
} }

View File

@@ -50,6 +50,7 @@ export function SwapSelectedAssetFrom({ onChooseAsset, title }: SwapSelectedAsse
} }
const { swapAssetFrom, swapAssetTo } = values; const { swapAssetFrom, swapAssetTo } = values;
if (swapAssetTo != null && swapAssetFrom != null) { if (swapAssetTo != null && swapAssetFrom != null) {
await setFieldValue('swapAmountTo', '');
const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, formattedBalance); const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, formattedBalance);
await setFieldValue('swapAmountTo', toAmount); await setFieldValue('swapAmountTo', toAmount);
await validateForm(); await validateForm();

View File

@@ -4,6 +4,8 @@ import { Box } from '@stacks/ui';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import get from 'lodash.get'; import get from 'lodash.get';
import { useSwapContext } from '@app/pages/swap/swap.context';
import { SwapAsset, SwapFormValues } from '../../hooks/use-swap'; import { SwapAsset, SwapFormValues } from '../../hooks/use-swap';
import { SwapAssetItem } from './swap-asset-item'; import { SwapAssetItem } from './swap-asset-item';
import { SwapAssetListLayout } from './swap-asset-list.layout'; import { SwapAssetListLayout } from './swap-asset-list.layout';
@@ -12,14 +14,29 @@ interface SwapAssetList {
assets: SwapAsset[]; assets: SwapAsset[];
} }
export function SwapAssetList({ assets }: SwapAssetList) { export function SwapAssetList({ assets }: SwapAssetList) {
const { setFieldValue } = useFormikContext<SwapFormValues>(); const { fetchToAmount } = useSwapContext();
const { setFieldValue, values } = useFormikContext<SwapFormValues>();
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
async function onChooseAsset(asset: SwapAsset) { async function onChooseAsset(asset: SwapAsset) {
if (get(location.state, 'swap') === 'from') await setFieldValue('swapAssetFrom', asset); let from: SwapAsset | undefined;
if (get(location.state, 'swap') === 'to') await setFieldValue('swapAssetTo', asset); let to: SwapAsset | undefined;
if (get(location.state, 'swap') === 'from') {
from = asset;
to = values.swapAssetTo;
await setFieldValue('swapAssetFrom', asset);
} else if (get(location.state, 'swap') === 'to') {
from = values.swapAssetFrom;
to = asset;
await setFieldValue('swapAssetTo', asset);
}
navigate(-1); navigate(-1);
if (values.swapAmountFrom && from && to) {
await setFieldValue('swapAmountTo', '');
const toAmount = await fetchToAmount(from, to, values.swapAmountFrom);
await setFieldValue('swapAmountTo', toAmount);
}
} }
return ( return (

View File

@@ -29,7 +29,7 @@ const oneHundredMillion = 100_000_000;
export function SwapContainer() { export function SwapContainer() {
const alexSDK = useState(() => new AlexSDK())[0]; const alexSDK = useState(() => new AlexSDK())[0];
const { data: supportedCurrencies = [] } = useQuery(['alex-supported-currencies'], async () => const { data: supportedCurrencies = [] } = useQuery(['alex-supported-swap-currencies'], async () =>
alexSDK.fetchSwappableCurrency() alexSDK.fetchSwappableCurrency()
); );