diff --git a/src/app/pages/swap/components/swap-amount-field.tsx b/src/app/pages/swap/components/swap-amount-field.tsx index 4265a3a8..ab32df74 100644 --- a/src/app/pages/swap/components/swap-amount-field.tsx +++ b/src/app/pages/swap/components/swap-amount-field.tsx @@ -25,6 +25,7 @@ export function SwapAmountField({ amountAsFiat, isDisabled, name }: SwapAmountFi const value = event.currentTarget.value; const { swapAssetFrom, swapAssetTo } = values; if (swapAssetFrom != null && swapAssetTo && !isNaN(Number(value))) { + await setFieldValue('swapAmountTo', ''); const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, value); await setFieldValue('swapAmountTo', toAmount); } diff --git a/src/app/pages/swap/components/swap-selected-asset-from.tsx b/src/app/pages/swap/components/swap-selected-asset-from.tsx index 1c8d8bb4..e5ffe2e7 100644 --- a/src/app/pages/swap/components/swap-selected-asset-from.tsx +++ b/src/app/pages/swap/components/swap-selected-asset-from.tsx @@ -50,6 +50,7 @@ export function SwapSelectedAssetFrom({ onChooseAsset, title }: SwapSelectedAsse } const { swapAssetFrom, swapAssetTo } = values; if (swapAssetTo != null && swapAssetFrom != null) { + await setFieldValue('swapAmountTo', ''); const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, formattedBalance); await setFieldValue('swapAmountTo', toAmount); await validateForm(); diff --git a/src/app/pages/swap/swap-choose-asset/components/swap-asset-list.tsx b/src/app/pages/swap/swap-choose-asset/components/swap-asset-list.tsx index e94304c0..040f83d6 100644 --- a/src/app/pages/swap/swap-choose-asset/components/swap-asset-list.tsx +++ b/src/app/pages/swap/swap-choose-asset/components/swap-asset-list.tsx @@ -4,6 +4,8 @@ import { Box } from '@stacks/ui'; import { useFormikContext } from 'formik'; import get from 'lodash.get'; +import { useSwapContext } from '@app/pages/swap/swap.context'; + import { SwapAsset, SwapFormValues } from '../../hooks/use-swap'; import { SwapAssetItem } from './swap-asset-item'; import { SwapAssetListLayout } from './swap-asset-list.layout'; @@ -12,14 +14,29 @@ interface SwapAssetList { assets: SwapAsset[]; } export function SwapAssetList({ assets }: SwapAssetList) { - const { setFieldValue } = useFormikContext(); + const { fetchToAmount } = useSwapContext(); + const { setFieldValue, values } = useFormikContext(); const location = useLocation(); const navigate = useNavigate(); async function onChooseAsset(asset: SwapAsset) { - if (get(location.state, 'swap') === 'from') await setFieldValue('swapAssetFrom', asset); - if (get(location.state, 'swap') === 'to') await setFieldValue('swapAssetTo', asset); + let from: SwapAsset | undefined; + 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); + if (values.swapAmountFrom && from && to) { + await setFieldValue('swapAmountTo', ''); + const toAmount = await fetchToAmount(from, to, values.swapAmountFrom); + await setFieldValue('swapAmountTo', toAmount); + } } return ( diff --git a/src/app/pages/swap/swap-container.tsx b/src/app/pages/swap/swap-container.tsx index 3784116c..4e514544 100644 --- a/src/app/pages/swap/swap-container.tsx +++ b/src/app/pages/swap/swap-container.tsx @@ -29,7 +29,7 @@ const oneHundredMillion = 100_000_000; export function SwapContainer() { 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() );