From 70c51a1ad112d3c37811ae7fb4e469d700c41107 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Fri, 5 Apr 2024 12:25:46 -0500
Subject: [PATCH] refactor: swaps routes, closes #4317

---
 src/app/features/container/container.tsx      |  4 +-
 .../pages/home/components/account-actions.tsx |  2 +-
 src/app/pages/swap/alex-swap-container.tsx    | 35 +++++-----
 .../components/swap-asset-item.tsx            |  2 +-
 .../components/swap-asset-list.tsx            | 51 ++++++++-------
 .../swap-asset-dialog-base.tsx                | 33 ++++++++++
 .../swap-asset-dialog-quote.tsx               | 33 ++++++++++
 .../select-asset-trigger-button.tsx           |  6 +-
 .../components}/swap-amount-field.tsx         | 31 +++++----
 .../components/swap-asset-select.layout.tsx}  | 16 ++---
 .../components/swap-asset-selected.tsx}       |  9 ++-
 .../components}/swap-toggle-button.tsx        | 26 ++++----
 .../swap-asset-select-base.tsx}               | 65 ++++++++++---------
 .../swap-asset-select-quote.tsx}              | 30 ++++-----
 .../swap-assets-pair.layout.tsx               | 10 +--
 .../swap-assets-pair/swap-assets-pair.tsx     | 23 +++----
 .../swap-choose-asset/swap-choose-asset.tsx   | 45 -------------
 .../components/swap-details/swap-details.tsx  | 12 ++--
 .../swap/components/swap-selected-assets.tsx  | 28 --------
 src/app/pages/swap/generate-swap-routes.tsx   |  6 +-
 src/app/pages/swap/hooks/use-swap-form.tsx    | 32 ++++-----
 src/app/pages/swap/hooks/use-swap-navigate.ts | 13 ++++
 src/app/pages/swap/swap.context.ts            |  4 +-
 src/app/pages/swap/swap.tsx                   | 36 ++++++----
 src/shared/route-urls.ts                      |  7 +-
 tests/page-object-models/swap.page.ts         |  6 +-
 tests/selectors/swap.selectors.ts             |  4 +-
 tests/specs/swap/swap.spec.ts                 | 16 ++---
 28 files changed, 310 insertions(+), 275 deletions(-)
 rename src/app/pages/swap/components/{swap-choose-asset => swap-asset-dialog}/components/swap-asset-item.tsx (94%)
 rename src/app/pages/swap/components/{swap-choose-asset => swap-asset-dialog}/components/swap-asset-list.tsx (56%)
 create mode 100644 src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx
 create mode 100644 src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx
 rename src/app/pages/swap/components/{ => swap-asset-select/components}/select-asset-trigger-button.tsx (94%)
 rename src/app/pages/swap/components/{ => swap-asset-select/components}/swap-amount-field.tsx (71%)
 rename src/app/pages/swap/components/{swap-selected-asset.layout.tsx => swap-asset-select/components/swap-asset-select.layout.tsx} (89%)
 rename src/app/pages/swap/components/{selected-asset.tsx => swap-asset-select/components/swap-asset-selected.tsx} (81%)
 rename src/app/pages/swap/components/{ => swap-asset-select/components}/swap-toggle-button.tsx (55%)
 rename src/app/pages/swap/components/{swap-selected-asset-from.tsx => swap-asset-select/swap-asset-select-base.tsx} (55%)
 rename src/app/pages/swap/components/{swap-selected-asset-to.tsx => swap-asset-select/swap-asset-select-quote.tsx} (57%)
 delete mode 100644 src/app/pages/swap/components/swap-choose-asset/swap-choose-asset.tsx
 delete mode 100644 src/app/pages/swap/components/swap-selected-assets.tsx
 create mode 100644 src/app/pages/swap/hooks/use-swap-navigate.ts

diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
index ab925cf0238..4379f003915 100644
--- a/src/app/features/container/container.tsx
+++ b/src/app/features/container/container.tsx
@@ -69,9 +69,11 @@ export function Container() {
   const displayHeader = !isLandingPage(pathname) && !isNoHeaderPopup(pathname);
   const isSessionLocked = getIsSessionLocked(pathname);
 
+  // TODO: Refactor? This is very hard to manage with dynamic routes. Temporarily
+  // added a fix to catch the swap route: '/swap/:base/:quote?'
   function getOnGoBackLocation(pathname: RouteUrls) {
+    if (pathname.includes('/swap')) return navigate(RouteUrls.Home);
     switch (pathname) {
-      case RouteUrls.Swap:
       case RouteUrls.Fund.replace(':currency', 'STX'):
       case RouteUrls.Fund.replace(':currency', 'BTC'):
       case RouteUrls.SendCryptoAssetForm.replace(':symbol', 'stx'):
diff --git a/src/app/pages/home/components/account-actions.tsx b/src/app/pages/home/components/account-actions.tsx
index e672502ca1b..9fbc32d8e0c 100644
--- a/src/app/pages/home/components/account-actions.tsx
+++ b/src/app/pages/home/components/account-actions.tsx
@@ -53,7 +53,7 @@ export function AccountActions() {
             data-testid={HomePageSelectors.SwapBtn}
             icon={<SwapIcon />}
             label="Swap"
-            onClick={() => navigate(RouteUrls.Swap)}
+            onClick={() => navigate(RouteUrls.Swap.replace(':base', 'STX').replace(':quote', ''))}
           />
         ),
         [ChainID.Testnet]: null,
diff --git a/src/app/pages/swap/alex-swap-container.tsx b/src/app/pages/swap/alex-swap-container.tsx
index 0107298857c..0b19faf9676 100644
--- a/src/app/pages/swap/alex-swap-container.tsx
+++ b/src/app/pages/swap/alex-swap-container.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 import { bytesToHex } from '@stacks/common';
 import { ContractCallPayload, TransactionTypes } from '@stacks/connect';
@@ -30,6 +30,7 @@ import { useAlexBroadcastSwap } from './hooks/use-alex-broadcast-swap';
 import { oneHundredMillion, useAlexSwap } from './hooks/use-alex-swap';
 import { useStacksBroadcastSwap } from './hooks/use-stacks-broadcast-swap';
 import { SwapAsset, SwapFormValues } from './hooks/use-swap-form';
+import { useSwapNavigate } from './hooks/use-swap-navigate';
 import { SwapContext, SwapProvider } from './swap.context';
 import {
   defaultSwapFee,
@@ -41,7 +42,7 @@ export const alexSwapRoutes = generateSwapRoutes(<AlexSwapContainer />);
 
 function AlexSwapContainer() {
   const [isSendingMax, setIsSendingMax] = useState(false);
-  const navigate = useNavigate();
+  const navigate = useSwapNavigate();
   const { setIsLoading } = useLoading(LoadingKeys.SUBMIT_SWAP_TRANSACTION);
   const currentAccount = useCurrentStacksAccount();
   const generateUnsignedTx = useGenerateStacksContractCallUnsignedTx();
@@ -78,14 +79,14 @@ function AlexSwapContainer() {
   );
 
   async function onSubmitSwapForReview(values: SwapFormValues) {
-    if (isUndefined(values.swapAssetFrom) || isUndefined(values.swapAssetTo)) {
+    if (isUndefined(values.swapAssetBase) || isUndefined(values.swapAssetQuote)) {
       logger.error('Error submitting swap for review');
       return;
     }
 
     const [router, lpFee] = await Promise.all([
-      alex.getRouter(values.swapAssetFrom.currency, values.swapAssetTo.currency),
-      alex.getFeeRate(values.swapAssetFrom.currency, values.swapAssetTo.currency),
+      alex.getRouter(values.swapAssetBase.currency, values.swapAssetQuote.currency),
+      alex.getFeeRate(values.swapAssetBase.currency, values.swapAssetQuote.currency),
     ]);
 
     onSetSwapSubmissionData({
@@ -100,10 +101,10 @@ function AlexSwapContainer() {
         .filter(isDefined),
       slippage,
       sponsored: isSponsoredByAlex,
-      swapAmountFrom: values.swapAmountFrom,
-      swapAmountTo: values.swapAmountTo,
-      swapAssetFrom: values.swapAssetFrom,
-      swapAssetTo: values.swapAssetTo,
+      swapAmountBase: values.swapAmountBase,
+      swapAmountQuote: values.swapAmountQuote,
+      swapAssetBase: values.swapAssetBase,
+      swapAssetQuote: values.swapAssetQuote,
       timestamp: new Date().toISOString(),
     });
 
@@ -117,8 +118,8 @@ function AlexSwapContainer() {
     }
 
     if (
-      isUndefined(swapSubmissionData.swapAssetFrom) ||
-      isUndefined(swapSubmissionData.swapAssetTo)
+      isUndefined(swapSubmissionData.swapAssetBase) ||
+      isUndefined(swapSubmissionData.swapAssetQuote)
     ) {
       logger.error('No assets selected to perform swap');
       return;
@@ -127,14 +128,14 @@ function AlexSwapContainer() {
     setIsLoading();
 
     const fromAmount = BigInt(
-      new BigNumber(swapSubmissionData.swapAmountFrom)
+      new BigNumber(swapSubmissionData.swapAmountBase)
         .multipliedBy(oneHundredMillion)
         .dp(0)
         .toString()
     );
 
     const minToAmount = BigInt(
-      new BigNumber(swapSubmissionData.swapAmountTo)
+      new BigNumber(swapSubmissionData.swapAmountQuote)
         .multipliedBy(oneHundredMillion)
         .multipliedBy(new BigNumber(1).minus(slippage))
         .dp(0)
@@ -143,8 +144,8 @@ function AlexSwapContainer() {
 
     const tx = alex.runSwap(
       currentAccount?.address,
-      swapSubmissionData.swapAssetFrom.currency,
-      swapSubmissionData.swapAssetTo.currency,
+      swapSubmissionData.swapAssetBase.currency,
+      swapSubmissionData.swapAssetQuote.currency,
       fromAmount,
       minToAmount,
       swapSubmissionData.router.map(x => x.currency)
@@ -197,8 +198,8 @@ function AlexSwapContainer() {
     onSetIsSendingMax: value => setIsSendingMax(value),
     onSubmitSwapForReview,
     onSubmitSwap,
-    swappableAssetsFrom: migratePositiveBalancesToTop(swappableAssets),
-    swappableAssetsTo: swappableAssets,
+    swappableAssetsBase: migratePositiveBalancesToTop(swappableAssets),
+    swappableAssetsQuote: swappableAssets,
     swapSubmissionData,
   };
 
diff --git a/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx
similarity index 94%
rename from src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx
rename to src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx
index 8e56372da2b..951e4b7c7ab 100644
--- a/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx
+++ b/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx
@@ -22,7 +22,7 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
   const fallback = getAvatarFallback(asset.name);
 
   return (
-    <Pressable data-testid={SwapSelectors.ChooseAssetListItem} onClick={onClick} my="space.02">
+    <Pressable data-testid={SwapSelectors.SwapAssetListItem} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={
           <Avatar.Root>
diff --git a/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-list.tsx b/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-list.tsx
similarity index 56%
rename from src/app/pages/swap/components/swap-choose-asset/components/swap-asset-list.tsx
rename to src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-list.tsx
index c7870c93e52..736c2152b17 100644
--- a/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-list.tsx
+++ b/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-list.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { SwapSelectors } from '@tests/selectors/swap.selectors';
 import BigNumber from 'bignumber.js';
@@ -6,6 +6,7 @@ import { useFormikContext } from 'formik';
 import { Stack } from 'leather-styles/jsx';
 
 import { createMoney } from '@shared/models/money.model';
+import { RouteUrls } from '@shared/route-urls';
 import { isUndefined } from '@shared/utils';
 
 import { convertAmountToFractionalUnit } from '@app/common/money/calculate-money';
@@ -13,46 +14,46 @@ import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 import { useSwapContext } from '@app/pages/swap/swap.context';
 
 import { SwapAsset, SwapFormValues } from '../../../hooks/use-swap-form';
-import { useSwapChooseAssetState } from '../swap-choose-asset';
 import { SwapAssetItem } from './swap-asset-item';
 
 interface SwapAssetList {
   assets: SwapAsset[];
+  type: string;
 }
-export function SwapAssetList({ assets }: SwapAssetList) {
+export function SwapAssetList({ assets, type }: SwapAssetList) {
   const { fetchToAmount } = useSwapContext();
-  const { swapListType } = useSwapChooseAssetState();
   const { setFieldError, setFieldValue, values } = useFormikContext<SwapFormValues>();
   const navigate = useNavigate();
-
-  const isFromList = swapListType === 'from';
-  const isToList = swapListType === 'to';
+  const { base, quote } = useParams();
+  const isBaseList = type === 'base';
+  const isQuoteList = type === 'quote';
 
   const selectableAssets = assets.filter(
     asset =>
-      (isFromList && asset.name !== values.swapAssetTo?.name) ||
-      (isToList && asset.name !== values.swapAssetFrom?.name)
+      (isBaseList && asset.name !== values.swapAssetQuote?.name) ||
+      (isQuoteList && asset.name !== values.swapAssetBase?.name)
   );
 
-  async function onChooseAsset(asset: SwapAsset) {
+  async function onSelectAsset(asset: SwapAsset) {
     let from: SwapAsset | undefined;
     let to: SwapAsset | undefined;
-    if (isFromList) {
+    if (isBaseList) {
       from = asset;
-      to = values.swapAssetTo;
-      await setFieldValue('swapAssetFrom', asset);
-    } else if (isToList) {
-      from = values.swapAssetFrom;
+      to = values.swapAssetQuote;
+      await setFieldValue('swapAssetBase', asset);
+      navigate(RouteUrls.Swap.replace(':base', from.name).replace(':quote', quote ?? ''));
+    } else if (isQuoteList) {
+      from = values.swapAssetBase;
       to = asset;
-      await setFieldValue('swapAssetTo', asset);
-      setFieldError('swapAssetTo', undefined);
+      await setFieldValue('swapAssetQuote', asset);
+      setFieldError('swapAssetQuote', undefined);
+      navigate(RouteUrls.Swap.replace(':base', base ?? '').replace(':quote', to.name));
     }
 
-    navigate(-1);
-    if (from && to && values.swapAmountFrom) {
-      const toAmount = await fetchToAmount(from, to, values.swapAmountFrom);
+    if (from && to && values.swapAmountBase) {
+      const toAmount = await fetchToAmount(from, to, values.swapAmountBase);
       if (isUndefined(toAmount)) {
-        await setFieldValue('swapAmountTo', '');
+        await setFieldValue('swapAmountQuote', '');
         return;
       }
       const toAmountAsMoney = createMoney(
@@ -60,18 +61,18 @@ export function SwapAssetList({ assets }: SwapAssetList) {
         to?.balance.symbol ?? '',
         to?.balance.decimals
       );
-      await setFieldValue('swapAmountTo', formatMoneyWithoutSymbol(toAmountAsMoney));
-      setFieldError('swapAmountTo', undefined);
+      await setFieldValue('swapAmountQuote', formatMoneyWithoutSymbol(toAmountAsMoney));
+      setFieldError('swapAmountQuote', undefined);
     }
   }
 
   return (
-    <Stack mb="space.05" p="space.05" width="100%" data-testid={SwapSelectors.ChooseAssetList}>
+    <Stack mb="space.05" p="space.05" width="100%" data-testid={SwapSelectors.SwapAssetList}>
       {selectableAssets.map(asset => (
         <SwapAssetItem
           asset={asset}
           key={asset.balance.symbol}
-          onClick={() => onChooseAsset(asset)}
+          onClick={() => onSelectAsset(asset)}
         />
       ))}
     </Stack>
diff --git a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx
new file mode 100644
index 00000000000..2db2e43070e
--- /dev/null
+++ b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx
@@ -0,0 +1,33 @@
+import { RouteUrls } from '@shared/route-urls';
+
+import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Header } from '@app/ui/components/containers/headers/header';
+
+import { useSwapNavigate } from '../../hooks/use-swap-navigate';
+import { useSwapContext } from '../../swap.context';
+import { SwapAssetList } from './components/swap-asset-list';
+
+export function SwapAssetDialogBase() {
+  const { swappableAssetsBase } = useSwapContext();
+  const navigate = useSwapNavigate();
+
+  return (
+    <Dialog
+      isShowing
+      onClose={() => navigate(RouteUrls.Swap)}
+      header={
+        <Header
+          title={
+            <>
+              Choose asset <br /> to swap
+            </>
+          }
+          variant="bigTitle"
+          onGoBack={() => navigate(RouteUrls.Swap)}
+        />
+      }
+    >
+      <SwapAssetList assets={swappableAssetsBase} type="base" />
+    </Dialog>
+  );
+}
diff --git a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx
new file mode 100644
index 00000000000..dffce78d4a0
--- /dev/null
+++ b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx
@@ -0,0 +1,33 @@
+import { RouteUrls } from '@shared/route-urls';
+
+import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Header } from '@app/ui/components/containers/headers/header';
+
+import { useSwapNavigate } from '../../hooks/use-swap-navigate';
+import { useSwapContext } from '../../swap.context';
+import { SwapAssetList } from './components/swap-asset-list';
+
+export function SwapAssetDialogQuote() {
+  const { swappableAssetsQuote } = useSwapContext();
+  const navigate = useSwapNavigate();
+
+  return (
+    <Dialog
+      isShowing
+      onClose={() => navigate(RouteUrls.Swap)}
+      header={
+        <Header
+          title={
+            <>
+              Choose asset <br /> to receive
+            </>
+          }
+          variant="bigTitle"
+          onGoBack={() => navigate(RouteUrls.Swap)}
+        />
+      }
+    >
+      <SwapAssetList assets={swappableAssetsQuote} type="quote" />
+    </Dialog>
+  );
+}
diff --git a/src/app/pages/swap/components/select-asset-trigger-button.tsx b/src/app/pages/swap/components/swap-asset-select/components/select-asset-trigger-button.tsx
similarity index 94%
rename from src/app/pages/swap/components/select-asset-trigger-button.tsx
rename to src/app/pages/swap/components/swap-asset-select/components/select-asset-trigger-button.tsx
index d51a9747d3a..c76294f5e38 100644
--- a/src/app/pages/swap/components/select-asset-trigger-button.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/components/select-asset-trigger-button.tsx
@@ -9,13 +9,13 @@ import { ChevronDownIcon } from '@app/ui/icons/chevron-down-icon';
 interface SelectAssetTriggerButtonProps {
   icon?: string;
   name: string;
-  onChooseAsset(): void;
+  onSelectAsset(): void;
   symbol: string;
 }
 export function SelectAssetTriggerButton({
   icon,
   name,
-  onChooseAsset,
+  onSelectAsset,
   symbol,
 }: SelectAssetTriggerButtonProps) {
   const [field] = useField(name);
@@ -24,7 +24,7 @@ export function SelectAssetTriggerButton({
   return (
     <Button
       data-testid={SwapSelectors.SelectAssetTriggerBtn}
-      onClick={onChooseAsset}
+      onClick={onSelectAsset}
       p="space.02"
       variant="ghost"
       {...field}
diff --git a/src/app/pages/swap/components/swap-amount-field.tsx b/src/app/pages/swap/components/swap-asset-select/components/swap-amount-field.tsx
similarity index 71%
rename from src/app/pages/swap/components/swap-amount-field.tsx
rename to src/app/pages/swap/components/swap-asset-select/components/swap-amount-field.tsx
index c747ba8d336..f3db4fe81d1 100644
--- a/src/app/pages/swap/components/swap-amount-field.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/components/swap-amount-field.tsx
@@ -12,12 +12,12 @@ import { useShowFieldError } from '@app/common/form-utils';
 import { convertAmountToFractionalUnit } from '@app/common/money/calculate-money';
 import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 
-import { SwapFormValues } from '../hooks/use-swap-form';
-import { useSwapContext } from '../swap.context';
+import { SwapFormValues } from '../../../hooks/use-swap-form';
+import { useSwapContext } from '../../../swap.context';
 
 function getPlaceholderValue(name: string, values: SwapFormValues) {
-  if (name === 'swapAmountFrom' && isDefined(values.swapAssetFrom)) return '0';
-  if (name === 'swapAmountTo' && isDefined(values.swapAssetTo)) return '0';
+  if (name === 'swapAmountBase' && isDefined(values.swapAssetBase)) return '0';
+  if (name === 'swapAmountQuote' && isDefined(values.swapAssetQuote)) return '0';
   return '-';
 }
 
@@ -30,25 +30,28 @@ export function SwapAmountField({ amountAsFiat, isDisabled, name }: SwapAmountFi
   const { fetchToAmount, isFetchingExchangeRate, onSetIsSendingMax } = useSwapContext();
   const { setFieldError, setFieldValue, values } = useFormikContext<SwapFormValues>();
   const [field] = useField(name);
-  const showError = useShowFieldError(name) && name === 'swapAmountFrom' && values.swapAssetTo;
+  const showError = useShowFieldError(name) && name === 'swapAmountBase' && values.swapAssetQuote;
 
   async function onBlur(event: ChangeEvent<HTMLInputElement>) {
-    const { swapAssetFrom, swapAssetTo } = values;
-    if (isUndefined(swapAssetFrom) || isUndefined(swapAssetTo)) return;
+    const { swapAssetBase, swapAssetQuote } = values;
+    if (isUndefined(swapAssetBase) || isUndefined(swapAssetQuote)) return;
     onSetIsSendingMax(false);
     const value = event.currentTarget.value;
-    const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, value);
+    const toAmount = await fetchToAmount(swapAssetBase, swapAssetQuote, value);
     if (isUndefined(toAmount)) {
-      await setFieldValue('swapAmountTo', '');
+      await setFieldValue('swapAmountQuote', '');
       return;
     }
     const toAmountAsMoney = createMoney(
-      convertAmountToFractionalUnit(new BigNumber(toAmount), values.swapAssetTo?.balance.decimals),
-      values.swapAssetTo?.balance.symbol ?? '',
-      values.swapAssetTo?.balance.decimals
+      convertAmountToFractionalUnit(
+        new BigNumber(toAmount),
+        values.swapAssetQuote?.balance.decimals
+      ),
+      values.swapAssetQuote?.balance.symbol ?? '',
+      values.swapAssetQuote?.balance.decimals
     );
-    await setFieldValue('swapAmountTo', formatMoneyWithoutSymbol(toAmountAsMoney));
-    setFieldError('swapAmountTo', undefined);
+    await setFieldValue('swapAmountQuote', formatMoneyWithoutSymbol(toAmountAsMoney));
+    setFieldError('swapAmountQuote', undefined);
   }
 
   return (
diff --git a/src/app/pages/swap/components/swap-selected-asset.layout.tsx b/src/app/pages/swap/components/swap-asset-select/components/swap-asset-select.layout.tsx
similarity index 89%
rename from src/app/pages/swap/components/swap-selected-asset.layout.tsx
rename to src/app/pages/swap/components/swap-asset-select/components/swap-asset-select.layout.tsx
index c5ddb5c9eae..12cb3e5e7b7 100644
--- a/src/app/pages/swap/components/swap-selected-asset.layout.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/components/swap-asset-select.layout.tsx
@@ -6,7 +6,7 @@ import { Link } from '@app/ui/components/link/link';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { SelectAssetTriggerButton } from './select-asset-trigger-button';
-import { SelectedAsset } from './selected-asset';
+import { SwapAssetSelected } from './swap-asset-selected';
 import { SwapToggleButton } from './swap-toggle-button';
 
 function getTextColor(showError?: boolean, onClickHandler?: boolean) {
@@ -15,12 +15,12 @@ function getTextColor(showError?: boolean, onClickHandler?: boolean) {
   return 'ink.text-subdued';
 }
 
-interface SwapSelectedAssetLayoutProps {
+interface SwapAssetSelectLayoutProps {
   caption?: string;
   error?: string;
   icon?: string;
   name: string;
-  onChooseAsset(): void;
+  onSelectAsset(): void;
   onClickHandler?(): void;
   showError?: boolean;
   showToggle?: boolean;
@@ -30,12 +30,12 @@ interface SwapSelectedAssetLayoutProps {
   tooltipLabel?: string;
   value: string;
 }
-export function SwapSelectedAssetLayout({
+export function SwapAssetSelectLayout({
   caption,
   error,
   icon,
   name,
-  onChooseAsset,
+  onSelectAsset,
   onClickHandler,
   showError,
   showToggle,
@@ -44,7 +44,7 @@ export function SwapSelectedAssetLayout({
   title,
   tooltipLabel,
   value,
-}: SwapSelectedAssetLayoutProps) {
+}: SwapAssetSelectLayoutProps) {
   const captionTextColor = getTextColor(showError);
 
   return (
@@ -58,12 +58,12 @@ export function SwapSelectedAssetLayout({
         <styled.span textStyle="label.01">{title}</styled.span>
         {showToggle && <SwapToggleButton />}
       </HStack>
-      <SelectedAsset
+      <SwapAssetSelected
         contentLeft={
           <SelectAssetTriggerButton
             icon={icon}
             name={name}
-            onChooseAsset={onChooseAsset}
+            onSelectAsset={onSelectAsset}
             symbol={symbol}
           />
         }
diff --git a/src/app/pages/swap/components/selected-asset.tsx b/src/app/pages/swap/components/swap-asset-select/components/swap-asset-selected.tsx
similarity index 81%
rename from src/app/pages/swap/components/selected-asset.tsx
rename to src/app/pages/swap/components/swap-asset-select/components/swap-asset-selected.tsx
index c2ede5a1dc5..9c1d352805f 100644
--- a/src/app/pages/swap/components/selected-asset.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/components/swap-asset-selected.tsx
@@ -1,12 +1,17 @@
 import { Box, HStack, styled } from 'leather-styles/jsx';
 
-interface SelectedAssetProps {
+interface SwapAssetSelectedProps {
   contentLeft: React.JSX.Element;
   contentRight: React.JSX.Element;
   name: string;
   showError?: boolean;
 }
-export function SelectedAsset({ contentLeft, contentRight, name, showError }: SelectedAssetProps) {
+export function SwapAssetSelected({
+  contentLeft,
+  contentRight,
+  name,
+  showError,
+}: SwapAssetSelectedProps) {
   return (
     <styled.label
       _focusWithin={{ border: 'action' }}
diff --git a/src/app/pages/swap/components/swap-toggle-button.tsx b/src/app/pages/swap/components/swap-asset-select/components/swap-toggle-button.tsx
similarity index 55%
rename from src/app/pages/swap/components/swap-toggle-button.tsx
rename to src/app/pages/swap/components/swap-asset-select/components/swap-toggle-button.tsx
index bd02266c8e4..bbd6a804757 100644
--- a/src/app/pages/swap/components/swap-toggle-button.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/components/swap-toggle-button.tsx
@@ -5,8 +5,8 @@ import { isDefined, isUndefined } from '@shared/utils';
 
 import { SwapIcon } from '@app/ui/icons';
 
-import { SwapFormValues } from '../hooks/use-swap-form';
-import { useSwapContext } from '../swap.context';
+import { SwapFormValues } from '../../../hooks/use-swap-form';
+import { useSwapContext } from '../../../swap.context';
 
 export function SwapToggleButton() {
   const { fetchToAmount, isFetchingExchangeRate, onSetIsSendingMax } = useSwapContext();
@@ -15,24 +15,24 @@ export function SwapToggleButton() {
   async function onToggleSwapAssets() {
     onSetIsSendingMax(false);
 
-    const prevAmountFrom = values.swapAmountFrom;
-    const prevAmountTo = values.swapAmountTo;
-    const prevAssetFrom = values.swapAssetFrom;
-    const prevAssetTo = values.swapAssetTo;
+    const prevAmountFrom = values.swapAmountBase;
+    const prevAmountTo = values.swapAmountQuote;
+    const prevAssetFrom = values.swapAssetBase;
+    const prevAssetTo = values.swapAssetQuote;
 
-    await setFieldValue('swapAssetFrom', prevAssetTo);
-    await setFieldValue('swapAssetTo', prevAssetFrom);
-    await setFieldValue('swapAmountFrom', prevAmountTo);
+    await setFieldValue('swapAssetBase', prevAssetTo);
+    await setFieldValue('swapAssetQuote', prevAssetFrom);
+    await setFieldValue('swapAmountBase', prevAmountTo);
 
     if (isDefined(prevAssetFrom) && isDefined(prevAssetTo)) {
       const toAmount = await fetchToAmount(prevAssetTo, prevAssetFrom, prevAmountTo);
       if (isUndefined(toAmount)) {
-        await setFieldValue('swapAmountTo', '');
+        await setFieldValue('swapAmountQuote', '');
         return;
       }
-      await setFieldValue('swapAmountTo', Number(toAmount));
+      await setFieldValue('swapAmountQuote', Number(toAmount));
     } else {
-      await setFieldValue('swapAmountTo', Number(prevAmountFrom));
+      await setFieldValue('swapAmountQuote', Number(prevAmountFrom));
     }
     await validateForm();
   }
@@ -40,7 +40,7 @@ export function SwapToggleButton() {
   return (
     <styled.button
       alignSelf="flex-start"
-      disabled={isUndefined(values.swapAssetTo) || isFetchingExchangeRate}
+      disabled={isUndefined(values.swapAssetQuote) || isFetchingExchangeRate}
       onClick={onToggleSwapAssets}
       type="button"
     >
diff --git a/src/app/pages/swap/components/swap-selected-asset-from.tsx b/src/app/pages/swap/components/swap-asset-select/swap-asset-select-base.tsx
similarity index 55%
rename from src/app/pages/swap/components/swap-selected-asset-from.tsx
rename to src/app/pages/swap/components/swap-asset-select/swap-asset-select-base.tsx
index 7dac171bcff..154674fae2a 100644
--- a/src/app/pages/swap/components/swap-selected-asset-from.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/swap-asset-select-base.tsx
@@ -2,6 +2,7 @@ import BigNumber from 'bignumber.js';
 import { useField, useFormikContext } from 'formik';
 
 import { createMoney } from '@shared/models/money.model';
+import { RouteUrls } from '@shared/route-urls';
 import { isUndefined } from '@shared/utils';
 
 import { useShowFieldError } from '@app/common/form-utils';
@@ -9,26 +10,25 @@ import { useAlexSdkAmountAsFiat } from '@app/common/hooks/use-alex-sdk';
 import { convertAmountToFractionalUnit } from '@app/common/money/calculate-money';
 import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 
-import { SwapFormValues } from '../hooks/use-swap-form';
-import { useSwapContext } from '../swap.context';
-import { SwapAmountField } from './swap-amount-field';
-import { SwapSelectedAssetLayout } from './swap-selected-asset.layout';
+import { SwapFormValues } from '../../hooks/use-swap-form';
+import { useSwapNavigate } from '../../hooks/use-swap-navigate';
+import { useSwapContext } from '../../swap.context';
+import { SwapAmountField } from './components/swap-amount-field';
+import { SwapAssetSelectLayout } from './components/swap-asset-select.layout';
 
 const availableBalanceCaption = 'Available balance';
 const maxAvailableTooltip =
   'Amount of funds that are immediately available for use, after taking into account any pending transactions or holds placed on your account by the protocol.';
 const sendingMaxTooltip = 'When sending max, this amount is affected by the fee you choose.';
-interface SwapSelectedAssetFromProps {
-  onChooseAsset(): void;
-  title: string;
-}
-export function SwapSelectedAssetFrom({ onChooseAsset, title }: SwapSelectedAssetFromProps) {
+
+export function SwapAssetSelectBase() {
   const { fetchToAmount, isFetchingExchangeRate, isSendingMax, onSetIsSendingMax } =
     useSwapContext();
   const { setFieldValue, setFieldError, values } = useFormikContext<SwapFormValues>();
-  const [amountField, amountFieldMeta, amountFieldHelpers] = useField('swapAmountFrom');
-  const showError = useShowFieldError('swapAmountFrom');
-  const [assetField] = useField('swapAssetFrom');
+  const [amountField, amountFieldMeta, amountFieldHelpers] = useField('swapAmountBase');
+  const showError = useShowFieldError('swapAmountBase');
+  const [assetField] = useField('swapAssetBase');
+  const navigate = useSwapNavigate();
 
   const amountAsFiat = useAlexSdkAmountAsFiat(
     assetField.value.balance,
@@ -36,48 +36,51 @@ export function SwapSelectedAssetFrom({ onChooseAsset, title }: SwapSelectedAsse
     amountField.value
   );
   const formattedBalance = formatMoneyWithoutSymbol(assetField.value.balance);
-  const isSwapAssetFromBalanceGreaterThanZero =
-    values.swapAssetFrom?.balance.amount.isGreaterThan(0);
+  const isSwapAssetBaseBalanceGreaterThanZero =
+    values.swapAssetBase?.balance.amount.isGreaterThan(0);
 
   async function onSetMaxBalanceAsAmountToSwap() {
-    const { swapAssetFrom, swapAssetTo } = values;
-    if (isFetchingExchangeRate || isUndefined(swapAssetFrom)) return;
+    const { swapAssetBase, swapAssetQuote } = values;
+    if (isFetchingExchangeRate || isUndefined(swapAssetBase)) return;
     onSetIsSendingMax(!isSendingMax);
     await amountFieldHelpers.setValue(Number(formattedBalance));
     await amountFieldHelpers.setTouched(true);
-    if (isUndefined(swapAssetTo)) return;
-    const toAmount = await fetchToAmount(swapAssetFrom, swapAssetTo, formattedBalance);
+    if (isUndefined(swapAssetQuote)) return;
+    const toAmount = await fetchToAmount(swapAssetBase, swapAssetQuote, formattedBalance);
     if (isUndefined(toAmount)) {
-      await setFieldValue('swapAmountTo', '');
+      await setFieldValue('swapAmountQuote', '');
       return;
     }
     const toAmountAsMoney = createMoney(
-      convertAmountToFractionalUnit(new BigNumber(toAmount), values.swapAssetTo?.balance.decimals),
-      values.swapAssetTo?.balance.symbol ?? '',
-      values.swapAssetTo?.balance.decimals
+      convertAmountToFractionalUnit(
+        new BigNumber(toAmount),
+        values.swapAssetQuote?.balance.decimals
+      ),
+      values.swapAssetQuote?.balance.symbol ?? '',
+      values.swapAssetQuote?.balance.decimals
     );
-    await setFieldValue('swapAmountTo', formatMoneyWithoutSymbol(toAmountAsMoney));
-    setFieldError('swapAmountTo', undefined);
+    await setFieldValue('swapAmountQuote', formatMoneyWithoutSymbol(toAmountAsMoney));
+    setFieldError('swapAmountQuote', undefined);
   }
 
   return (
-    <SwapSelectedAssetLayout
+    <SwapAssetSelectLayout
       caption={availableBalanceCaption}
       error={amountFieldMeta.error}
       icon={assetField.value.icon}
-      name="swapAmountFrom"
-      onChooseAsset={onChooseAsset}
+      name="swapAmountBase"
+      onSelectAsset={() => navigate(RouteUrls.SwapAssetSelectBase)}
       onClickHandler={onSetMaxBalanceAsAmountToSwap}
-      showError={!!(showError && values.swapAssetTo)}
+      showError={!!(showError && values.swapAssetQuote)}
       swapAmountInput={
         <SwapAmountField
           amountAsFiat={amountAsFiat}
-          isDisabled={!isSwapAssetFromBalanceGreaterThanZero}
-          name="swapAmountFrom"
+          isDisabled={!isSwapAssetBaseBalanceGreaterThanZero}
+          name="swapAmountBase"
         />
       }
       symbol={assetField.value.name}
-      title={title}
+      title="You pay"
       tooltipLabel={isSendingMax ? sendingMaxTooltip : maxAvailableTooltip}
       value={formattedBalance}
     />
diff --git a/src/app/pages/swap/components/swap-selected-asset-to.tsx b/src/app/pages/swap/components/swap-asset-select/swap-asset-select-quote.tsx
similarity index 57%
rename from src/app/pages/swap/components/swap-selected-asset-to.tsx
rename to src/app/pages/swap/components/swap-asset-select/swap-asset-select-quote.tsx
index 284f9e0b823..5a74b2e3a20 100644
--- a/src/app/pages/swap/components/swap-selected-asset-to.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/swap-asset-select-quote.tsx
@@ -1,21 +1,21 @@
 import { useField } from 'formik';
 
+import { RouteUrls } from '@shared/route-urls';
+
 import { useAlexSdkAmountAsFiat } from '@app/common/hooks/use-alex-sdk';
 import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 
-import { useSwapContext } from '../swap.context';
-import { SwapAmountField } from './swap-amount-field';
-import { SwapSelectedAssetLayout } from './swap-selected-asset.layout';
+import { useSwapNavigate } from '../../hooks/use-swap-navigate';
+import { useSwapContext } from '../../swap.context';
+import { SwapAmountField } from './components/swap-amount-field';
+import { SwapAssetSelectLayout } from './components/swap-asset-select.layout';
 
-interface SwapSelectedAssetToProps {
-  onChooseAsset(): void;
-  title: string;
-}
-export function SwapSelectedAssetTo({ onChooseAsset, title }: SwapSelectedAssetToProps) {
+export function SwapAssetSelectQuote() {
   const { isFetchingExchangeRate } = useSwapContext();
-  const [amountField] = useField('swapAmountTo');
-  const [assetField] = useField('swapAssetTo');
+  const [amountField] = useField('swapAmountQuote');
+  const [assetField] = useField('swapAssetQuote');
+  const navigate = useSwapNavigate();
 
   const amountAsFiat = useAlexSdkAmountAsFiat(
     assetField.value?.balance,
@@ -24,21 +24,21 @@ export function SwapSelectedAssetTo({ onChooseAsset, title }: SwapSelectedAssetT
   );
 
   return (
-    <SwapSelectedAssetLayout
+    <SwapAssetSelectLayout
       caption="You have"
       icon={assetField.value?.icon}
-      name="swapAmountTo"
-      onChooseAsset={onChooseAsset}
+      name="swapAmountQuote"
+      onSelectAsset={() => navigate(RouteUrls.SwapAssetSelectQuote)}
       showToggle
       swapAmountInput={
         isFetchingExchangeRate ? (
           <LoadingSpinner justifyContent="flex-end" size="sm" />
         ) : (
-          <SwapAmountField amountAsFiat={amountAsFiat} isDisabled name="swapAmountTo" />
+          <SwapAmountField amountAsFiat={amountAsFiat} isDisabled name="swapAmountQuote" />
         )
       }
       symbol={assetField.value?.name ?? 'Select asset'}
-      title={title}
+      title="You receive"
       value={assetField.value?.balance ? formatMoneyWithoutSymbol(assetField.value?.balance) : '0'}
     />
   );
diff --git a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
index 656de32b0f9..390098c2952 100644
--- a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
+++ b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
@@ -3,10 +3,10 @@ import { Box, Stack } from 'leather-styles/jsx';
 import { ArrowDownIcon } from '@app/ui/icons/arrow-down-icon';
 
 interface SwapAssetsPairLayoutProps {
-  swapAssetFrom: React.JSX.Element;
-  swapAssetTo: React.JSX.Element;
+  swapAssetBase: React.JSX.Element;
+  swapAssetQuote: React.JSX.Element;
 }
-export function SwapAssetsPairLayout({ swapAssetFrom, swapAssetTo }: SwapAssetsPairLayoutProps) {
+export function SwapAssetsPairLayout({ swapAssetBase, swapAssetQuote }: SwapAssetsPairLayoutProps) {
   return (
     <Stack
       border="default"
@@ -17,11 +17,11 @@ export function SwapAssetsPairLayout({ swapAssetFrom, swapAssetTo }: SwapAssetsP
       p="space.04"
       width="100%"
     >
-      {swapAssetFrom}
+      {swapAssetBase}
       <Box height="24px" px="space.04" py="space.01" width="48px">
         <ArrowDownIcon variant="small" />
       </Box>
-      {swapAssetTo}
+      {swapAssetQuote}
     </Stack>
   );
 }
diff --git a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.tsx b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.tsx
index e552d171710..ba3f47398ad 100644
--- a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.tsx
+++ b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.tsx
@@ -10,31 +10,32 @@ import { SwapAssetItemLayout } from './swap-asset-item.layout';
 import { SwapAssetsPairLayout } from './swap-assets-pair.layout';
 
 export function SwapAssetsPair() {
-  const { values } = useFormikContext<SwapFormValues>();
-  const { swapAmountFrom, swapAmountTo, swapAssetFrom, swapAssetTo } = values;
+  const {
+    values: { swapAmountBase, swapAmountQuote, swapAssetBase, swapAssetQuote },
+  } = useFormikContext<SwapFormValues>();
   const navigate = useNavigate();
 
-  if (isUndefined(swapAssetFrom) || isUndefined(swapAssetTo)) {
+  if (isUndefined(swapAssetBase) || isUndefined(swapAssetQuote)) {
     navigate(RouteUrls.Swap, { replace: true });
     return null;
   }
 
   return (
     <SwapAssetsPairLayout
-      swapAssetFrom={
+      swapAssetBase={
         <SwapAssetItemLayout
           caption="You will swap"
-          icon={swapAssetFrom.icon}
-          symbol={swapAssetFrom.name}
-          value={swapAmountFrom}
+          icon={swapAssetBase.icon}
+          symbol={swapAssetBase.name}
+          value={swapAmountBase}
         />
       }
-      swapAssetTo={
+      swapAssetQuote={
         <SwapAssetItemLayout
           caption="You will receive"
-          icon={swapAssetTo.icon}
-          symbol={swapAssetTo.name}
-          value={swapAmountTo}
+          icon={swapAssetQuote.icon}
+          symbol={swapAssetQuote.name}
+          value={swapAmountQuote}
         />
       }
     />
diff --git a/src/app/pages/swap/components/swap-choose-asset/swap-choose-asset.tsx b/src/app/pages/swap/components/swap-choose-asset/swap-choose-asset.tsx
deleted file mode 100644
index 20683678027..00000000000
--- a/src/app/pages/swap/components/swap-choose-asset/swap-choose-asset.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-
-import get from 'lodash.get';
-
-import { RouteUrls } from '@shared/route-urls';
-
-import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { Header } from '@app/ui/components/containers/headers/header';
-
-import { useSwapContext } from '../../swap.context';
-import { SwapAssetList } from './components/swap-asset-list';
-
-export function useSwapChooseAssetState() {
-  const location = useLocation();
-  const swapListType = get(location.state, 'swap') as string;
-  return { swapListType };
-}
-
-export function SwapChooseAsset() {
-  const { swappableAssetsFrom, swappableAssetsTo } = useSwapContext();
-  const { swapListType } = useSwapChooseAssetState();
-  const navigate = useNavigate();
-
-  const isFromList = swapListType === 'from';
-
-  const title = isFromList ? (
-    <>
-      Choose asset <br /> to swap
-    </>
-  ) : (
-    <>
-      Choose asset <br /> to receive
-    </>
-  );
-
-  return (
-    <Dialog
-      isShowing
-      onClose={() => navigate(RouteUrls.Swap)}
-      header={<Header title={title} variant="bigTitle" onGoBack={() => navigate(RouteUrls.Swap)} />}
-    >
-      <SwapAssetList assets={isFromList ? swappableAssetsFrom : swappableAssetsTo} />
-    </Dialog>
-  );
-}
diff --git a/src/app/pages/swap/components/swap-details/swap-details.tsx b/src/app/pages/swap/components/swap-details/swap-details.tsx
index 1e08bebec87..2d80b41b509 100644
--- a/src/app/pages/swap/components/swap-details/swap-details.tsx
+++ b/src/app/pages/swap/components/swap-details/swap-details.tsx
@@ -38,16 +38,16 @@ export function SwapDetails() {
 
   if (
     isUndefined(swapSubmissionData) ||
-    isUndefined(swapSubmissionData.swapAssetFrom) ||
-    isUndefined(swapSubmissionData.swapAssetTo)
+    isUndefined(swapSubmissionData.swapAssetBase) ||
+    isUndefined(swapSubmissionData.swapAssetQuote)
   )
     return null;
 
   const formattedMinToReceive = formatMoneyPadded(
     createMoneyFromDecimal(
-      new BigNumber(swapSubmissionData.swapAmountTo).times(1 - swapSubmissionData.slippage),
-      swapSubmissionData.swapAssetTo.balance.symbol,
-      swapSubmissionData.swapAssetTo.balance.decimals
+      new BigNumber(swapSubmissionData.swapAmountQuote).times(1 - swapSubmissionData.slippage),
+      swapSubmissionData.swapAssetQuote.balance.symbol,
+      swapSubmissionData.swapAssetQuote.balance.decimals
     )
   );
 
@@ -74,7 +74,7 @@ export function SwapDetails() {
       <SwapDetailLayout
         title="Liquidity provider fee"
         tooltipLabel="To receive a share of these fees, become a Liquidity Provider on app.alexlab.co."
-        value={`${swapSubmissionData.liquidityFee} ${swapSubmissionData.swapAssetFrom.name}`}
+        value={`${swapSubmissionData.liquidityFee} ${swapSubmissionData.swapAssetBase.name}`}
       />
       <SwapDetailLayout
         title="Transaction fees"
diff --git a/src/app/pages/swap/components/swap-selected-assets.tsx b/src/app/pages/swap/components/swap-selected-assets.tsx
deleted file mode 100644
index 3c685bc4597..00000000000
--- a/src/app/pages/swap/components/swap-selected-assets.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-import { RouteUrls } from '@shared/route-urls';
-
-import { SwapSelectedAssetFrom } from './swap-selected-asset-from';
-import { SwapSelectedAssetTo } from './swap-selected-asset-to';
-
-const titleFrom = 'You pay';
-const titleTo = 'You receive';
-
-export function SwapSelectedAssets() {
-  const navigate = useNavigate();
-
-  function onChooseAssetFrom() {
-    navigate(RouteUrls.SwapChooseAsset, { state: { swap: 'from' } });
-  }
-
-  function onChooseAssetTo() {
-    navigate(RouteUrls.SwapChooseAsset, { state: { swap: 'to' } });
-  }
-
-  return (
-    <>
-      <SwapSelectedAssetFrom onChooseAsset={onChooseAssetFrom} title={titleFrom} />
-      <SwapSelectedAssetTo onChooseAsset={onChooseAssetTo} title={titleTo} />
-    </>
-  );
-}
diff --git a/src/app/pages/swap/generate-swap-routes.tsx b/src/app/pages/swap/generate-swap-routes.tsx
index 2a3cd476a9d..ce51366d51e 100644
--- a/src/app/pages/swap/generate-swap-routes.tsx
+++ b/src/app/pages/swap/generate-swap-routes.tsx
@@ -5,7 +5,8 @@ import { RouteUrls } from '@shared/route-urls';
 import { ledgerStacksTxSigningRoutes } from '@app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container';
 import { AccountGate } from '@app/routes/account-gate';
 
-import { SwapChooseAsset } from './components/swap-choose-asset/swap-choose-asset';
+import { SwapAssetDialogBase } from './components/swap-asset-dialog/swap-asset-dialog-base';
+import { SwapAssetDialogQuote } from './components/swap-asset-dialog/swap-asset-dialog-quote';
 import { SwapError } from './components/swap-error';
 import { SwapReview } from './components/swap-review';
 import { Swap } from './swap';
@@ -14,7 +15,8 @@ export function generateSwapRoutes(container: React.ReactNode) {
   return (
     <Route element={<AccountGate>{container}</AccountGate>}>
       <Route path={RouteUrls.Swap} element={<Swap />}>
-        <Route path={RouteUrls.SwapChooseAsset} element={<SwapChooseAsset />} />
+        <Route path={RouteUrls.SwapAssetSelectBase} element={<SwapAssetDialogBase />} />
+        <Route path={RouteUrls.SwapAssetSelectQuote} element={<SwapAssetDialogQuote />} />
       </Route>
       <Route path={RouteUrls.SwapError} element={<SwapError />} />
       <Route path={RouteUrls.SwapReview} element={<SwapReview />}>
diff --git a/src/app/pages/swap/hooks/use-swap-form.tsx b/src/app/pages/swap/hooks/use-swap-form.tsx
index f5604065e1a..ae0f93da070 100644
--- a/src/app/pages/swap/hooks/use-swap-form.tsx
+++ b/src/app/pages/swap/hooks/use-swap-form.tsx
@@ -21,10 +21,10 @@ export interface SwapAsset {
 }
 
 export interface SwapFormValues extends StacksTransactionFormValues {
-  swapAmountFrom: string;
-  swapAmountTo: string;
-  swapAssetFrom?: SwapAsset;
-  swapAssetTo?: SwapAsset;
+  swapAmountBase: string;
+  swapAmountQuote: string;
+  swapAssetBase?: SwapAsset;
+  swapAssetQuote?: SwapAsset;
 }
 
 export function useSwapForm() {
@@ -35,36 +35,36 @@ export function useSwapForm() {
     feeCurrency: 'STX',
     feeType: FeeTypes[FeeTypes.Middle],
     nonce: nextNonce?.nonce,
-    swapAmountFrom: '',
-    swapAmountTo: '',
-    swapAssetFrom: undefined,
-    swapAssetTo: undefined,
+    swapAmountBase: '',
+    swapAmountQuote: '',
+    swapAssetBase: undefined,
+    swapAssetQuote: undefined,
   };
 
   const validationSchema = yup.object({
-    swapAssetFrom: yup.object<SwapAsset>().required(),
-    swapAssetTo: yup.object<SwapAsset>().required(),
-    swapAmountFrom: yup
+    swapAssetBase: yup.object<SwapAsset>().required(),
+    swapAssetQuote: yup.object<SwapAsset>().required(),
+    swapAmountBase: yup
       .number()
       .test({
         message: 'Insufficient balance',
         test(value) {
-          const { swapAssetFrom } = this.parent;
+          const { swapAssetBase } = this.parent;
           const valueInFractionalUnit = convertAmountToFractionalUnit(
             createMoney(
               new BigNumber(Number(value)),
-              swapAssetFrom.balance.symbol,
-              swapAssetFrom.balance.decimals
+              swapAssetBase.balance.symbol,
+              swapAssetBase.balance.decimals
             )
           );
-          if (swapAssetFrom.balance.amount.isLessThan(valueInFractionalUnit)) return false;
+          if (swapAssetBase.balance.amount.isLessThan(valueInFractionalUnit)) return false;
           return true;
         },
       })
       .required(FormErrorMessages.AmountRequired)
       .typeError(FormErrorMessages.MustBeNumber)
       .positive(FormErrorMessages.MustBePositive),
-    swapAmountTo: yup
+    swapAmountQuote: yup
       .number()
       .required(FormErrorMessages.AmountRequired)
       .typeError(FormErrorMessages.MustBeNumber)
diff --git a/src/app/pages/swap/hooks/use-swap-navigate.ts b/src/app/pages/swap/hooks/use-swap-navigate.ts
new file mode 100644
index 00000000000..72890163875
--- /dev/null
+++ b/src/app/pages/swap/hooks/use-swap-navigate.ts
@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+export function useSwapNavigate() {
+  const navigate = useNavigate();
+  const { base, quote } = useParams();
+  return useCallback(
+    (route: string) => {
+      navigate(route.replace(':base', base ?? '').replace(':quote', quote ?? ''));
+    },
+    [base, navigate, quote]
+  );
+}
diff --git a/src/app/pages/swap/swap.context.ts b/src/app/pages/swap/swap.context.ts
index 0634881a577..2b98312c02d 100644
--- a/src/app/pages/swap/swap.context.ts
+++ b/src/app/pages/swap/swap.context.ts
@@ -19,8 +19,8 @@ export interface SwapContext {
   onSetIsSendingMax(value: boolean): void;
   onSubmitSwapForReview(values: SwapFormValues): Promise<void> | void;
   onSubmitSwap(): Promise<void> | void;
-  swappableAssetsFrom: SwapAsset[];
-  swappableAssetsTo: SwapAsset[];
+  swappableAssetsBase: SwapAsset[];
+  swappableAssetsQuote: SwapAsset[];
   swapSubmissionData?: SwapSubmissionData;
 }
 
diff --git a/src/app/pages/swap/swap.tsx b/src/app/pages/swap/swap.tsx
index 04331c47075..48565753c00 100644
--- a/src/app/pages/swap/swap.tsx
+++ b/src/app/pages/swap/swap.tsx
@@ -1,5 +1,5 @@
-import { useAsync } from 'react-async-hook';
-import { Outlet } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Outlet, useParams } from 'react-router-dom';
 
 import { SwapSelectors } from '@tests/selectors/swap.selectors';
 import { useFormikContext } from 'formik';
@@ -12,21 +12,30 @@ import { Footer } from '@app/ui/components/containers/footers/footer';
 import { Card } from '@app/ui/layout/card/card';
 import { CardContent } from '@app/ui/layout/card/card-content';
 
-import { SwapSelectedAssets } from './components/swap-selected-assets';
+import { SwapAssetSelectBase } from './components/swap-asset-select/swap-asset-select-base';
+import { SwapAssetSelectQuote } from './components/swap-asset-select/swap-asset-select-quote';
 import { SwapFormValues } from './hooks/use-swap-form';
 import { useSwapContext } from './swap.context';
 
 export function Swap() {
-  const { isFetchingExchangeRate, swappableAssetsFrom } = useSwapContext();
+  const { isFetchingExchangeRate, swappableAssetsBase, swappableAssetsQuote } = useSwapContext();
   const { dirty, isValid, setFieldValue, values } = useFormikContext<SwapFormValues>();
-
-  useAsync(async () => {
-    if (isUndefined(values.swapAssetFrom))
-      return await setFieldValue('swapAssetFrom', swappableAssetsFrom[0]);
-    return;
-  }, [swappableAssetsFrom, values.swapAssetFrom]);
-
-  if (isUndefined(values.swapAssetFrom)) return <LoadingSpinner height="300px" />;
+  const { base, quote } = useParams();
+
+  useEffect(() => {
+    if (base)
+      void setFieldValue(
+        'swapAssetBase',
+        swappableAssetsBase.find(asset => asset.name === base)
+      );
+    if (quote)
+      void setFieldValue(
+        'swapAssetQuote',
+        swappableAssetsQuote.find(asset => asset.name === quote)
+      );
+  }, [base, quote, setFieldValue, swappableAssetsBase, swappableAssetsQuote, values.swapAssetBase]);
+
+  if (isUndefined(values.swapAssetBase)) return <LoadingSpinner height="300px" />;
 
   return (
     <Card
@@ -44,7 +53,8 @@ export function Swap() {
       }
     >
       <CardContent dataTestId={SwapSelectors.SwapPageReady}>
-        <SwapSelectedAssets />
+        <SwapAssetSelectBase />
+        <SwapAssetSelectQuote />
       </CardContent>
       <Outlet />
     </Card>
diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts
index 87903d8d0e5..d9bffa73381 100644
--- a/src/shared/route-urls.ts
+++ b/src/shared/route-urls.ts
@@ -82,10 +82,11 @@ export enum RouteUrls {
   SendOrdinalInscriptionError = 'error',
 
   // Swap routes
-  Swap = '/swap',
-  SwapChooseAsset = '/swap/choose-asset',
+  Swap = '/swap/:base/:quote?',
+  SwapAssetSelectBase = 'select-base',
+  SwapAssetSelectQuote = 'select-quote',
   SwapError = '/swap/error',
-  SwapReview = '/swap/review',
+  SwapReview = '/swap/:base/:quote/review',
 
   // Legacy request routes
   ProfileUpdateRequest = '/update-profile',
diff --git a/tests/page-object-models/swap.page.ts b/tests/page-object-models/swap.page.ts
index 23b54b42ddb..bf440b98c14 100644
--- a/tests/page-object-models/swap.page.ts
+++ b/tests/page-object-models/swap.page.ts
@@ -8,8 +8,8 @@ export class SwapPage {
   readonly swapDetailsAmount: Locator;
   readonly swapDetailsProtocol: Locator;
   readonly swapDetailsSymbol: Locator;
-  readonly chooseAssetList = createTestSelector(SwapSelectors.ChooseAssetList);
-  readonly chooseAssetListItem = createTestSelector(SwapSelectors.ChooseAssetListItem);
+  readonly chooseAssetList = createTestSelector(SwapSelectors.SwapAssetList);
+  readonly chooseAssetListItem = createTestSelector(SwapSelectors.SwapAssetListItem);
   readonly selectAssetBtn = createTestSelector(SwapSelectors.SelectAssetTriggerBtn);
   readonly swapAmountInput = createTestSelector(SwapSelectors.SwapAmountInput);
   readonly swapReviewBtn = createTestSelector(SwapSelectors.SwapReviewBtn);
@@ -36,7 +36,7 @@ export class SwapPage {
     await this.page.locator(this.swapReviewBtn).click();
   }
 
-  async inputSwapAmountFrom() {
+  async inputSwapAmountBase() {
     const swapAmountInputs = await this.page.locator(this.swapAmountInput).all();
     await swapAmountInputs[0].fill('1');
   }
diff --git a/tests/selectors/swap.selectors.ts b/tests/selectors/swap.selectors.ts
index 6165835ed32..dc0753c2cc3 100644
--- a/tests/selectors/swap.selectors.ts
+++ b/tests/selectors/swap.selectors.ts
@@ -1,6 +1,6 @@
 export enum SwapSelectors {
-  ChooseAssetList = 'choose-asset-list',
-  ChooseAssetListItem = 'choose-asset-list-item',
+  SwapAssetList = 'swap-asset-list',
+  SwapAssetListItem = 'swap-asset-list-item',
   SelectAssetTriggerBtn = 'select-asset-trigger-btn',
   SwapAmountInput = 'swap-amount-input',
   SwapBtn = 'swap-btn',
diff --git a/tests/specs/swap/swap.spec.ts b/tests/specs/swap/swap.spec.ts
index 0c11649e47f..730b1f8d377 100644
--- a/tests/specs/swap/swap.spec.ts
+++ b/tests/specs/swap/swap.spec.ts
@@ -15,21 +15,21 @@ test.describe('Swaps', () => {
   });
 
   test('that it shows correct swap review details', async ({ swapPage }) => {
-    await swapPage.inputSwapAmountFrom();
+    await swapPage.inputSwapAmountBase();
     await swapPage.selectAssetToReceive();
 
     const swapProtocol = await swapPage.swapDetailsProtocol.innerText();
     test.expect(swapProtocol).toEqual('ALEX');
 
     const swapAssets = await swapPage.swapDetailsSymbol.all();
-    const swapAssetFrom = await swapAssets[0].innerText();
-    const swapAssetTo = await swapAssets[1].innerText();
-    test.expect(swapAssetFrom).toEqual('STX');
-    test.expect(swapAssetTo).toEqual('ALEX');
+    const swapAssetBase = await swapAssets[0].innerText();
+    const swapAssetQuote = await swapAssets[1].innerText();
+    test.expect(swapAssetBase).toEqual('STX');
+    test.expect(swapAssetQuote).toEqual('ALEX');
 
     const swapAmounts = await swapPage.swapDetailsAmount.all();
-    const swapAmountFrom = await swapAmounts[0].innerText();
-    test.expect(swapAmountFrom).toEqual('1');
+    const swapAmountBase = await swapAmounts[0].innerText();
+    test.expect(swapAmountBase).toEqual('1');
 
     test.expect(swapPage.page.getByText('Sponsored')).toBeTruthy();
   });
@@ -41,7 +41,7 @@ test.describe('Swaps', () => {
       await route.abort();
     });
 
-    await swapPage.inputSwapAmountFrom();
+    await swapPage.inputSwapAmountBase();
     await swapPage.selectAssetToReceive();
 
     await swapPage.swapBtn.click();