Simple spot trading (#684)

* env: added sharp * fix: use dvh over vh * feat: prepared the trade view for perps and spot * fix: adjusted heights for Trade * feat: added Navigation submenu * feat: added first interface itteration * feat: added logic * feat: added pairsList * feat: finished Trade Spot Simple * fix: fixed Sell button * fix: adjusted capLeft logic and added sorting util * fix: order of values * fix: fixed the autoLend switch to be deselectable * env: bump version * fix: changes according to feedback * fix: fixed naming * tidy: refactor
2023-12-12 11:14:29 +01:00 · 2023-12-12 11:14:29 +01:00 · 22b9f7b518
commit 22b9f7b518
parent c7e8d0c6ae
46 changed files with 1345 additions and 672 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "mars-v2-frontend",
-  "version": "2.1.1",
+  "version": "2.1.2",
  "private": true,
  "scripts": {
    "build": "yarn validate-env && next build",
--- a/src/components/Account/AccountBalancesTable/Columns/LiqPrice.tsx
+++ b/src/components/Account/AccountBalancesTable/Columns/LiqPrice.tsx
@ -21,11 +21,13 @@ interface Props {
  computeLiquidationPrice: (denom: string, kind: LiquidationPriceKind) => number | null
  denom: string
  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
+  account: Account
 }

 export default function LiqPrice(props: Props) {
-  const { denom, type, amount, computeLiquidationPrice } = props
+  const { denom, type, amount, account, computeLiquidationPrice } = props
  const [lastLiquidationPrice, setLastLiquidationPrice] = useState<number | null>(null)
+  const hasDebt = account.debts.length > 0

  const liqPrice = useMemo(() => {
    if (type === 'vault' || amount === 0) return 0
@ -38,19 +40,18 @@ export default function LiqPrice(props: Props) {
    if (lastLiquidationPrice !== liqPrice && liqPrice !== null) setLastLiquidationPrice(liqPrice)
  }, [liqPrice, lastLiquidationPrice])

+  const tooltipText = useMemo(() => {
+    if (type === 'vault')
+      return 'Liquidation prices cannot be calculated for farm positions. But it a drop in price of the underlying assets can still cause a liquidation.'
+    if (!hasDebt) return 'Your position cannot be liquidated as you currently have no debt.'
+    return 'The position size is too small to liquidate the account, even if the price goes to $0.00.'
+  }, [type, hasDebt])
+
  if (!lastLiquidationPrice || (liquidationPrice === 0 && lastLiquidationPrice === 0))
    return (
      <Text size='xs' className='flex items-center justify-end number'>
        N/A
-        <Tooltip
-          content={
-            type === 'vault'
-              ? 'Liquidation prices cannot be calculated for farm positions. But it a drop in price of the underlying assets can still cause a liquidation.'
-              : 'The position size is too small to liquidate the account, even if the price goes to $0.00.'
-          }
-          type='info'
-          className='ml-1'
-        >
+        <Tooltip content={tooltipText} type='info' className='ml-1'>
          <InfoCircle className='w-3.5 h-3.5 text-white/40 hover:text-inherit' />
        </Tooltip>
      </Text>
--- a/src/components/Account/AccountBalancesTable/Columns/useAccountBalancesColumns.tsx
+++ b/src/components/Account/AccountBalancesTable/Columns/useAccountBalancesColumns.tsx
@ -81,6 +81,7 @@ export default function useAccountBalancesColumns(
                  computeLiquidationPrice={computeLiquidationPrice}
                  type={row.original.type}
                  amount={row.original.amount.toNumber()}
+                  account={updatedAccount ?? account}
                />
              ),
            },
@ -98,5 +99,5 @@ export default function useAccountBalancesColumns(
        ),
      },
    ]
-  }, [computeLiquidationPrice, markets, showLiquidationPrice])
+  }, [computeLiquidationPrice, markets, showLiquidationPrice, account, updatedAccount])
 }
--- a/src/components/DirectionSelect.tsx
+++ b/src/components/DirectionSelect.tsx
@ -0,0 +1,59 @@
+import classNames from 'classnames'
+
+import Text from 'components/Text'
+
+interface Props {
+  direction: OrderDirection
+  onChangeDirection: (direction: OrderDirection) => void
+  asset?: Asset
+}
+
+export function DirectionSelect(props: Props) {
+  const hasAsset = props.asset
+  const directions: OrderDirection[] = hasAsset ? ['buy', 'sell'] : ['long', 'short']
+  return (
+    <div className='flex rounded-sm bg-black/20'>
+      <Direction
+        onClick={() => props.onChangeDirection(directions[0])}
+        direction={directions[0]}
+        isActive={props.direction === directions[0]}
+        asset={props.asset}
+      />
+      <Direction
+        onClick={() => props.onChangeDirection(directions[1])}
+        direction={directions[1]}
+        isActive={props.direction === directions[1]}
+        asset={props.asset}
+      />
+    </div>
+  )
+}
+
+interface DirectionProps {
+  direction: 'long' | 'short' | 'buy' | 'sell'
+  isActive: boolean
+  onClick: () => void
+  asset?: Asset
+}
+function Direction(props: DirectionProps) {
+  const classString = props.direction === 'long' || props.direction === 'buy' ? 'success' : 'error'
+  return (
+    <button
+      className={classNames(
+        'px-4 py-3 rounded-sm flex-1',
+        props.isActive && 'border bg-white/10',
+        `border-${classString}`,
+      )}
+      onClick={props.onClick}
+    >
+      <Text
+        className={classNames(
+          'text-center first-letter:uppercase',
+          props.isActive ? `text-${classString}` : 'text-white/20',
+        )}
+      >
+        {props.asset ? `${props.direction} ${props.asset.symbol}` : props.direction}
+      </Text>
+    </button>
+  )
+}
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@ -6,8 +6,13 @@ interface Props {
 }

 export default function Divider(props: Props) {
-  if (props.orientation === 'vertical') {
-    return <div className={classNames(props.className, 'h-full w-[1px] bg-white/10')}></div>
-  }
-  return <div className={classNames('h-[1px] w-full bg-white/10', props.className)}></div>
+  return (
+    <div
+      className={classNames(
+        props.orientation === 'vertical' ? 'h-full w-[1px]' : 'h-[1px] w-full',
+        props.className,
+        'bg-white/10',
+      )}
+    ></div>
+  )
 }
--- a/src/components/Header/DesktopHeader.tsx
+++ b/src/components/Header/DesktopHeader.tsx
@ -4,18 +4,36 @@ import { isDesktop } from 'react-device-detect'
 import AccountMenu from 'components/Account/AccountMenu'
 import EscButton from 'components/Button/EscButton'
 import OracleResyncButton from 'components/Header/OracleResyncButton'
+import { Coins, CoinsSwap } from 'components/Icons'
 import DesktopNavigation from 'components/Navigation/DesktopNavigation'
 import RewardsCenter from 'components/RewardsCenter'
 import Settings from 'components/Settings'
 import Wallet from 'components/Wallet'
 import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'
-import { ENABLE_HLS, ENABLE_PERPS } from 'utils/constants'
 import { WalletID } from 'types/enums/wallet'
+import { ENABLE_HLS, ENABLE_PERPS } from 'utils/constants'
 import { getGovernanceUrl } from 'utils/helpers'

 export const menuTree = (walletId: WalletID): MenuTreeEntry[] => [
-  { pages: ['trade'], label: 'Trade' },
+  {
+    pages: ['trade', 'trade-advanced'],
+    label: 'Trade',
+    submenu: [
+      {
+        page: 'trade',
+        label: 'Spot',
+        subtitle: 'Trade assets against stables',
+        icon: <Coins className='w-6 h-6' />,
+      },
+      {
+        page: 'trade-advanced',
+        label: 'Spot Advanced',
+        subtitle: 'Trade any assets',
+        icon: <CoinsSwap className='w-6 h-6' />,
+      },
+    ],
+  },
  ...(ENABLE_PERPS ? [{ pages: ['perps'] as Page[], label: 'Perps' }] : []),
  { pages: ['lend', 'farm'], label: 'Earn' },
  { pages: ['borrow'], label: 'Borrow' },
--- a/src/components/Icons/Coins.svg
+++ b/src/components/Icons/Coins.svg
@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.9377 15.9377C19.3603 15.4795 22 12.548 22 9C22 5.13401 18.866 2 15 2C11.452 2 8.52049 4.63967 8.06227 8.06227M16 15C16 18.866 12.866 22 9 22C5.13401 22 2 18.866 2 15C2 11.134 5.13401 8 9 8C12.866 8 16 11.134 16 15Z"
+    stroke="currentColor"
+  />
+</svg>
--- a/src/components/Icons/CoinsSwap.svg
+++ b/src/components/Icons/CoinsSwap.svg
@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6 6L8 4M8 4L6 2M8 4H6C3.79086 4 2 5.79086 2 8M18 18L16 20M16 20L18 22M16 20H18C20.2091 20 22 18.2091 22 16M10.189 6.5C10.8551 3.91216 13.2042 2 16 2C19.3137 2 22 4.68629 22 8C22 10.7957 20.0879 13.1449 17.5001 13.811M14 16C14 19.3137 11.3137 22 8 22C4.68629 22 2 19.3137 2 16C2 12.6863 4.68629 10 8 10C11.3137 10 14 12.6863 14 16Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@ -15,6 +15,8 @@ export { default as ChevronLeft } from 'components/Icons/ChevronLeft.svg'
 export { default as ChevronRight } from 'components/Icons/ChevronRight.svg'
 export { default as ChevronUp } from 'components/Icons/ChevronUp.svg'
 export { default as Circle } from 'components/Icons/Circle.svg'
+export { default as Coins } from 'components/Icons/Coins.svg'
+export { default as CoinsSwap } from 'components/Icons/CoinsSwap.svg'
 export { default as Compass } from 'components/Icons/Compass.svg'
 export { default as Copy } from 'components/Icons/Copy.svg'
 export { default as Cross } from 'components/Icons/Cross.svg'
--- a/src/components/Navigation/DesktopNavigation.tsx
+++ b/src/components/Navigation/DesktopNavigation.tsx
@ -1,34 +1,29 @@
 import { useShuttle } from '@delphi-labs/shuttle-react'
 import classNames from 'classnames'
 import { useMemo } from 'react'
-import { useSearchParams } from 'react-router-dom'

 import Button from 'components/Button'
 import { menuTree } from 'components/Header/DesktopHeader'
 import { ChevronDown, Logo } from 'components/Icons'
 import { NavLink } from 'components/Navigation/NavLink'
-import useAccountId from 'hooks/useAccountId'
+import { NavMenu } from 'components/Navigation/NavMenu'
 import useToggle from 'hooks/useToggle'
 import useStore from 'store'
 import { WalletID } from 'types/enums/wallet'
-import { getRoute } from 'utils/route'
+
+export function getIsActive(pages: string[]) {
+  const segments = location.pathname.split('/')
+  return pages.some((page) => segments.includes(page))
+}

 export default function DesktopNavigation() {
  const [showMenu, setShowMenu] = useToggle()
  const { recentWallet } = useShuttle()
  const walletId = (recentWallet?.providerId as WalletID) ?? WalletID.Keplr
-  const address = useStore((s) => s.address)
-  const accountId = useAccountId()
-  const [searchParams] = useSearchParams()
  const focusComponent = useStore((s) => s.focusComponent)

  const menu = useMemo(() => menuTree(walletId), [walletId])

-  function getIsActive(pages: string[]) {
-    const segments = location.pathname.split('/')
-    return pages.some((page) => segments.includes(page))
-  }
-
  return (
    <div
      className={classNames(
@ -37,31 +32,29 @@ export default function DesktopNavigation() {
          : 'flex flex-1 items-center relative z-50',
      )}
    >
-      <NavLink href={getRoute('trade', searchParams, address, accountId)}>
+      <NavLink isHome item={menu[0]}>
        <span className='block w-10 h-10'>
          <Logo className='text-white' />
        </span>
      </NavLink>
      {!focusComponent && (
-        <div className='flex gap-8 px-6 @container/navigation relative flex-1'>
-          {menu.map((item, index) => (
-            <NavLink
-              key={index}
-              href={
-                item.externalUrl
-                  ? item.externalUrl
-                  : getRoute(item.pages[0], searchParams, address, accountId)
-              }
-              isActive={getIsActive(item.pages)}
-              className={`@nav-${index}/navigation:inline-block hidden whitespace-nowrap`}
-              target={item.externalUrl ? '_blank' : undefined}
-            >
-              {item.label}
-            </NavLink>
-          ))}
+        <div className='flex gap-8 px-6 h-6 @container/navigation relative flex-1'>
+          {menu.map((item, index) =>
+            item.submenu ? (
+              <NavMenu key={index} item={item} />
+            ) : (
+              <NavLink
+                key={index}
+                item={item}
+                className={`@nav-${index}/navigation:inline-block hidden whitespace-nowrap`}
+              >
+                {item.label}
+              </NavLink>
+            ),
+          )}
          <div className={`@nav-${menu.length - 1}/navigation:hidden flex items-center relative`}>
            <Button
-              leftIcon={<ChevronDown />}
+              leftIcon={<ChevronDown className='w-3' />}
              color='quaternary'
              variant='transparent'
              onClick={() => setShowMenu(!showMenu)}
@ -84,15 +77,9 @@ export default function DesktopNavigation() {
                        key={index}
                      >
                        <NavLink
-                          href={
-                            item.externalUrl
-                              ? item.externalUrl
-                              : getRoute(item.pages[0], searchParams, address, accountId)
-                          }
+                          item={item}
                          onClick={() => setShowMenu(false)}
-                          isActive={getIsActive(item.pages)}
                          className='w-full px-4 whitespace-nowrap'
-                          target={item.externalUrl ? '_blank' : undefined}
                        >
                          {item.label}
                        </NavLink>
--- a/src/components/Navigation/NavLink.tsx
+++ b/src/components/Navigation/NavLink.tsx
@ -1,27 +1,41 @@
 import classNames from 'classnames'
 import { ReactNode } from 'react'
-import { NavLink as Link } from 'react-router-dom'
+import { NavLink as Link, useSearchParams } from 'react-router-dom'
+
+import { getIsActive } from 'components/Navigation/DesktopNavigation'
+import useAccountId from 'hooks/useAccountId'
+import useStore from 'store'
+import { getRoute } from 'utils/route'

 interface Props {
-  href: string
  children: string | ReactNode
-  isActive?: boolean
+  item: MenuTreeEntry
+  isHome?: boolean
  className?: string
  onClick?: () => void
-  target?: string
 }

 export const NavLink = (props: Props) => {
+  const [searchParams] = useSearchParams()
+  const address = useStore((s) => s.address)
+  const { isHome, item, className, onClick } = props
+  const accountId = useAccountId()
+
+  const itemLink = item.externalUrl
+    ? item.externalUrl
+    : getRoute(item.pages[0], searchParams, address, accountId)
+  const link = isHome ? getRoute('trade', searchParams, address, accountId) : itemLink
+
  return (
    <Link
-      to={props.href}
-      onClick={props.onClick ? props.onClick : undefined}
+      to={link}
+      onClick={onClick ? onClick : undefined}
      className={classNames(
-        props.className,
+        className,
        'font-semibold hover:text-white active:text-white',
-        props.isActive ? 'pointer-events-none text-white' : 'text-white/60',
+        getIsActive(item.pages) ? 'pointer-events-none text-white' : 'text-white/60',
      )}
-      target={props.target}
+      target={item.externalUrl ? '_blank' : undefined}
    >
      {props.children}
    </Link>
--- a/src/components/Navigation/NavMenu.tsx
+++ b/src/components/Navigation/NavMenu.tsx
@ -0,0 +1,80 @@
+import classNames from 'classnames'
+
+import Button from 'components/Button'
+import Divider from 'components/Divider'
+import { ChevronDown } from 'components/Icons'
+import { NavLink } from 'components/Navigation//NavLink'
+import { getIsActive } from 'components/Navigation/DesktopNavigation'
+import Text from 'components/Text'
+import useToggle from 'hooks/useToggle'
+
+interface Props {
+  item: MenuTreeEntry
+}
+
+export const NavMenu = (props: Props) => {
+  const { item } = props
+  const [showMenu, setShowMenu] = useToggle()
+
+  if (!item.submenu) return null
+
+  return (
+    <div className='relative flex items-center'>
+      <Button
+        rightIcon={<ChevronDown className='w-3' />}
+        color='quaternary'
+        variant='transparent'
+        onClick={() => setShowMenu(!showMenu)}
+        text={item.label}
+        className={classNames(
+          '!text-base !p-0 !min-h-0',
+          (getIsActive(item.pages) || showMenu) && '!text-white',
+        )}
+      />
+      {showMenu && (
+        <>
+          <div className='absolute left-0 top-[calc(100%+4px)] z-50'>
+            <ul
+              className={classNames(
+                'py-4 list-none flex flex-wrap gap-2 bg-white/10 backdrop-blur-lg',
+                'relative isolate max-w-full overflow-hidden rounded-sm',
+                'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
+              )}
+            >
+              {item.submenu.map((submenuitem, index) => (
+                <li className='w-full m-0 group/submenuitem' key={index}>
+                  {index !== 0 && <Divider className='mb-2' />}
+                  <NavLink
+                    item={{ pages: [submenuitem.page], label: submenuitem.label }}
+                    onClick={() => setShowMenu(false)}
+                    className='flex items-center w-full gap-4 px-4 whitespace-nowrap'
+                  >
+                    {submenuitem.icon && <div className='w-6'>{submenuitem.icon}</div>}
+                    <Text className='flex flex-wrap'>
+                      {submenuitem.label}
+                      {submenuitem.subtitle && (
+                        <span
+                          className={classNames(
+                            'w-full text-sm group-hover/submenuitem:text-white',
+                            getIsActive([submenuitem.page]) ? 'text-white' : 'text-white/40',
+                          )}
+                        >
+                          {submenuitem.subtitle}
+                        </span>
+                      )}
+                    </Text>
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div
+            className='fixed -top-6 -left-[55px] z-40 w-screen h-screen hover:cursor-pointer'
+            onClick={() => setShowMenu(false)}
+            role='button'
+          />
+        </>
+      )}
+    </div>
+  )
+}
--- a/src/components/Perps/Module/PerpsModule.tsx
+++ b/src/components/Perps/Module/PerpsModule.tsx
@ -2,10 +2,10 @@ import { useState } from 'react'

 import Button from 'components/Button'
 import Card from 'components/Card'
+import { DirectionSelect } from 'components/DirectionSelect'
 import { ChevronDown } from 'components/Icons'
 import { LeverageButtons } from 'components/Perps/Module/LeverageButtons'
 import { Or } from 'components/Perps/Module/Or'
-import { SelectLongShort } from 'components/Perps/Module/SelectLongShort'
 import RangeInput from 'components/RangeInput'
 import { Spacer } from 'components/Spacer'
 import Text from 'components/Text'
@ -23,7 +23,7 @@ export function PerpsModule() {
    <Card
      contentClassName='px-4 gap-5 flex flex-col'
      title={
-        <div className='flex justify-between bg-white/10 py-4 pl-4 pr-2 items-center'>
+        <div className='flex items-center justify-between py-4 pl-4 pr-2 bg-white/10'>
          <Text>
            ETH<span className='text-white/60'>/USD</span>
          </Text>
@ -35,7 +35,7 @@ export function PerpsModule() {
      className='mb-4'
    >
      <OrderTypeSelector selected={selectedOrderType} onChange={setSelectedOrderType} />
-      <SelectLongShort
+      <DirectionSelect
        direction={selectedOrderDirection}
        onChangeDirection={setSelectedOrderDirection}
      />
--- a/src/components/Perps/Module/SelectLongShort.tsx
+++ b/src/components/Perps/Module/SelectLongShort.tsx
@ -1,62 +0,0 @@
-import classNames from 'classnames'
-
-import Text from 'components/Text'
-
-interface Props {
-  direction: OrderDirection
-  onChangeDirection: (direction: OrderDirection) => void
-}
-
-export function SelectLongShort(props: Props) {
-  return (
-    <div className='flex bg-black/20 rounded-sm'>
-      <Direction
-        onClick={() => props.onChangeDirection('long')}
-        direction='long'
-        isActive={props.direction === 'long'}
-      />
-      <Direction
-        onClick={() => props.onChangeDirection('short')}
-        direction='short'
-        isActive={props.direction === 'short'}
-      />
-    </div>
-  )
-}
-
-interface DirectionProps {
-  direction: 'long' | 'short'
-  isActive: boolean
-  onClick: () => void
-}
-function Direction(props: DirectionProps) {
-  return (
-    <button
-      className={classNames(
-        'px-4 py-3 rounded-sm flex-1',
-        borderColors[props.direction],
-        props.isActive && 'border bg-white/10',
-      )}
-      onClick={props.onClick}
-    >
-      <Text
-        className={classNames(
-          'text-center capitalize',
-          props.isActive ? directionColors[props.direction] : 'text-white/20',
-        )}
-      >
-        {props.direction}
-      </Text>
-    </button>
-  )
-}
-
-const directionColors = {
-  long: 'text-success',
-  short: 'text-error',
-}
-
-const borderColors = {
-  long: 'border-success',
-  short: 'border-error',
-}
--- a/src/components/Routes.tsx
+++ b/src/components/Routes.tsx
@ -11,8 +11,7 @@ import PerpsPage from 'pages/PerpsPage'
 import PortfolioAccountPage from 'pages/PortfolioAccountPage'
 import PortfolioPage from 'pages/PortfolioPage'
 import TradePage from 'pages/TradePage'
-import { ENABLE_PERPS } from 'utils/constants'
-import { ENABLE_HLS } from 'utils/constants'
+import { ENABLE_HLS, ENABLE_PERPS } from 'utils/constants'

 export default function Routes() {
  return (
@ -25,6 +24,7 @@ export default function Routes() {
        }
      >
        <Route path='/trade' element={<TradePage />} />
+        <Route path='/trade-advanced' element={<TradePage />} />
        {ENABLE_PERPS && <Route path='/perps' element={<PerpsPage />} />}
        <Route path='/farm' element={<FarmPage />} />
        <Route path='/lend' element={<LendPage />} />
@ -36,6 +36,7 @@ export default function Routes() {
        <Route path='/' element={<TradePage />} />
        <Route path='/wallets/:address'>
          <Route path='trade' element={<TradePage />} />
+          <Route path='trade-advanced' element={<TradePage />} />
          {ENABLE_PERPS && <Route path='perps' element={<PerpsPage />} />}
          <Route path='farm' element={<FarmPage />} />
          <Route path='lend' element={<LendPage />} />
--- a/src/components/Switch/SwitchAutoLend.tsx
+++ b/src/components/Switch/SwitchAutoLend.tsx
@ -27,15 +27,12 @@ export default function SwitchAutoLend(props: Props) {
      return
    }

-    if (isAutoLendEnabled) {
-      setIsAutoLendEnabled(false)
-      disableAutoLend(accountId)
-    }
+    setIsAutoLendEnabled(false)
+    disableAutoLend(accountId)
  }, [
    accountId,
    disableAutoLend,
    enableAutoLend,
-    isAutoLendEnabled,
    isAutoLendEnabledForAccount,
    setIsAutoLendEnabled,
  ])
--- a/src/components/Trade/AccountDetailsCard.tsx
+++ b/src/components/Trade/AccountDetailsCard.tsx
@ -18,12 +18,14 @@ export default function AccountDetailsCard() {

  if (account)
    return (
-      <AccountBalancesTable
-        account={account}
-        borrowingData={borrowAssetsData}
-        lendingData={lendingAssetsData}
-        tableBodyClassName='gradient-card-content'
-        showLiquidationPrice
-      />
+      <div className='w-full'>
+        <AccountBalancesTable
+          account={account}
+          borrowingData={borrowAssetsData}
+          lendingData={lendingAssetsData}
+          tableBodyClassName='gradient-card-content'
+          showLiquidationPrice
+        />
+      </div>
    )
 }
--- a/src/components/Trade/TradeChart/TVChartContainer.tsx
+++ b/src/components/Trade/TradeChart/TVChartContainer.tsx
@ -156,7 +156,7 @@ export const TVChartContainer = (props: Props) => {
        </div>
      }
      contentClassName='px-0.5 pb-0.5 h-full'
-      className='min-h-[55dvh] h-full'
+      className='h-[70dvh] max-h-[980px] min-h-[560px]'
    >
      <div ref={chartContainerRef} className='h-full overflow-hidden rounded-b-base' />
    </Card>
--- a/src/components/Trade/TradeChart/index.tsx
+++ b/src/components/Trade/TradeChart/index.tsx
@ -45,7 +45,7 @@ export default function TradeChart(props: Props) {
            </div>
          }
          contentClassName='px-0.5 pb-0.5 h-full'
-          className='min-h-[55dvh]'
+          className='h-[70dvh] max-h-[980px] min-h-[560px]'
        >
          <div className='flex items-center justify-center w-full h-full rounded-b-base bg-chart'>
            <CircularProgress size={60} className='opacity-50' />
--- a/src/components/Trade/TradeModule/AssetSelector/AssetItem.tsx
+++ b/src/components/Trade/TradeModule/AssetSelector/AssetItem.tsx
@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import AssetImage from 'components/Asset/AssetImage'
 import AssetSymbol from 'components/Asset/AssetSymbol'
 import DisplayCurrency from 'components/DisplayCurrency'
@ -38,6 +40,13 @@ export default function AssetItem(props: Props) {
    setFavoriteAssetsDenoms(favoriteAssetsDenoms.filter((item: string) => item !== asset.denom))
  }

+  const capLeft = useMemo(() => {
+    if (!props.depositCap) return 0
+    const percent = props.depositCap.used.dividedBy(props.depositCap.max).multipliedBy(100)
+    const depositCapLeft = 100 - Math.min(percent.toNumber(), 100)
+    return depositCapLeft
+  }, [props.depositCap])
+
  return (
    <li className='border-b border-white/10 hover:bg-black/10'>
      <button
@ -80,12 +89,16 @@ export default function AssetItem(props: Props) {
                )}
              </div>
            )}
-            {props.depositCap && (
+            {props.depositCap && capLeft <= 15 && (
              <div className='flex gap-1'>
                <span className='text-xs text-left text-white/60'>Cap Left: </span>
                <DisplayCurrency
-                  className='text-xs text-left text-white/60'
-                  coin={BNCoin.fromDenomAndBigNumber(props.depositCap.denom, props.depositCap.max)}
+                  className='text-xs text-left text-info/60'
+                  coin={BNCoin.fromDenomAndBigNumber(
+                    props.depositCap.denom,
+                    props.depositCap.max.minus(props.depositCap.used),
+                  )}
+                  options={{ suffix: ` (${capLeft.toFixed(2)}%)` }}
                />
              </div>
            )}
--- a/src/components/Trade/TradeModule/AssetSelector/AssetList.tsx
+++ b/src/components/Trade/TradeModule/AssetSelector/AssetList.tsx
@ -3,54 +3,67 @@ import { useMemo } from 'react'

 import { ChevronDown } from 'components/Icons'
 import Text from 'components/Text'
-import AssetItem from 'components/Trade/TradeModule/AssetSelector/AssetItem'
+import { ASSETS } from 'constants/assets'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useMarketAssets from 'hooks/useMarketAssets'
+import useMarketDeposits from 'hooks/useMarketDeposits'
+import usePrices from 'hooks/usePrices'
 import { getMergedBalancesForAsset } from 'utils/accounts'
 import { byDenom } from 'utils/array'
-import { getEnabledMarketAssets } from 'utils/assets'
+import { getEnabledMarketAssets, sortAssetsOrPairs } from 'utils/assets'
+import AssetSelectorItem from 'components/Trade/TradeModule/AssetSelector/AssetSelectorItem'

 interface Props {
  type: 'buy' | 'sell'
  assets: Asset[]
  isOpen: boolean
  toggleOpen: () => void
-  onChangeAsset: (asset: Asset) => void
+  onChangeAsset: (asset: Asset | AssetPair) => void
 }

+const baseDenom = ASSETS[0].denom
+
 export default function AssetList(props: Props) {
+  const { assets, type, isOpen, toggleOpen, onChangeAsset } = props
  const account = useCurrentAccount()
  const { data: marketAssets } = useMarketAssets()
+  const { data: marketDeposits } = useMarketDeposits()
+  const { data: prices } = usePrices()
  const balances = useMemo(() => {
    if (!account) return []
    return getMergedBalancesForAsset(account, getEnabledMarketAssets())
  }, [account])

+  const sortedAssets = useMemo(
+    () => sortAssetsOrPairs(assets, prices, marketDeposits, balances, baseDenom) as Asset[],
+    [balances, prices, assets, marketDeposits],
+  )
+
  return (
    <section>
      <button
        className='flex items-center justify-between w-full p-4 bg-black/20'
-        onClick={props.toggleOpen}
+        onClick={toggleOpen}
      >
-        <Text>{props.type === 'buy' ? 'Buy asset' : 'Sell asset'}</Text>
-        <ChevronDown className={classNames(props.isOpen && '-rotate-180', 'w-4')} />
+        <Text>{type === 'buy' ? 'Buy asset' : 'Sell asset'}</Text>
+        <ChevronDown className={classNames(isOpen && '-rotate-180', 'w-4')} />
      </button>
-      {props.isOpen &&
-        (props.assets.length === 0 ? (
+      {isOpen &&
+        (sortedAssets.length === 0 ? (
          <Text size='xs' className='p-4'>
            No available assets found
          </Text>
        ) : (
          <ul>
-            {props.assets.map((asset) => (
-              <AssetItem
+            {sortedAssets.map((asset) => (
+              <AssetSelectorItem
                balances={balances}
-                key={`${props.type}-${asset.symbol}`}
-                asset={asset}
-                onSelectAsset={props.onChangeAsset}
+                key={`${type}-${asset.symbol}`}
+                onSelect={props.onChangeAsset}
                depositCap={
-                  props.type === 'buy' ? marketAssets?.find(byDenom(asset.denom))?.cap : undefined
+                  type === 'buy' ? marketAssets?.find(byDenom(asset.denom))?.cap : undefined
                }
+                asset={asset}
              />
            ))}
          </ul>
--- a/src/components/Trade/TradeModule/AssetSelector/AssetOverlay.tsx
+++ b/src/components/Trade/TradeModule/AssetSelector/AssetOverlay.tsx
@ -1,34 +1,77 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'

+import Button from 'components/Button'
 import EscButton from 'components/Button/EscButton'
 import Divider from 'components/Divider'
 import Overlay from 'components/Overlay'
 import SearchBar from 'components/SearchBar'
 import Text from 'components/Text'
 import AssetList from 'components/Trade/TradeModule/AssetSelector/AssetList'
+import PairsList from 'components/Trade/TradeModule/AssetSelector/PairsList'
 import useFilteredAssets from 'hooks/useFilteredAssets'
+import { getAllAssets } from 'utils/assets'

 interface Props {
  state: OverlayState
  buyAsset: Asset
  sellAsset: Asset
-  onChangeBuyAsset: (asset: Asset) => void
-  onChangeSellAsset: (asset: Asset) => void
+  onChangeBuyAsset?: (asset: Asset) => void
+  onChangeSellAsset?: (asset: Asset) => void
+  onChangeTradingPair?: (tradingPair: TradingPair) => void
  onChangeState: (state: OverlayState) => void
 }

-export default function AssetOverlay(props: Props) {
-  const { assets, searchString, onChangeSearch } = useFilteredAssets()
-  const handleClose = useCallback(() => props.onChangeState('closed'), [props])
+interface StablesFilterProps {
+  stables: Asset[]
+  selectedStables: Asset[]
+  onFilter: (stables: Asset[]) => void
+}

-  const handleToggle = useCallback(
-    () => props.onChangeState(props.state === 'buy' ? 'sell' : 'buy'),
-    [props],
+function StablesFilter(props: StablesFilterProps) {
+  const { stables, selectedStables, onFilter } = props
+  const isAllSelected = selectedStables.length > 1
+  return (
+    <>
+      <Divider />
+      <div className='flex items-center w-full py-2 justify-evenly'>
+        <Button
+          onClick={() => onFilter(stables)}
+          text='All'
+          color={isAllSelected ? 'secondary' : 'quaternary'}
+          variant='transparent'
+          className={isAllSelected ? '!text-white !bg-white/10 border-white' : ''}
+        />
+        {stables.map((stable) => {
+          const isCurrent = !isAllSelected && selectedStables[0].denom === stable.denom
+          return (
+            <Button
+              key={stable.symbol}
+              onClick={() => onFilter([stable])}
+              text={stable.symbol}
+              color={isCurrent ? 'secondary' : 'quaternary'}
+              variant='transparent'
+              className={isCurrent ? '!text-white !bg-white/10 border-white' : ''}
+            />
+          )
+        })}
+      </div>
+    </>
  )
+}
+
+export default function AssetOverlay(props: Props) {
+  const isPairSelector = !!props.onChangeTradingPair
+  const { assets, searchString, onChangeSearch } = useFilteredAssets()
+  const allAssets = getAllAssets()
+  const stableAssets = useMemo(() => allAssets.filter((asset) => asset.isStable), [allAssets])
+  const handleClose = useCallback(() => props.onChangeState('closed'), [props])
+  const handleToggle = useCallback(() => props.onChangeState(props.state), [props])
+  const [selectedStables, setSelectedStables] = useState<Asset[]>(stableAssets)

  const buyAssets = useMemo(
-    () => assets.filter((asset) => asset.denom !== props.sellAsset.denom),
-    [assets, props.sellAsset],
+    () =>
+      isPairSelector ? assets : assets.filter((asset) => asset.denom !== props.sellAsset.denom),
+    [assets, props.sellAsset, isPairSelector],
  )

  const sellAssets = useMemo(
@ -36,14 +79,26 @@ export default function AssetOverlay(props: Props) {
    [assets, props.buyAsset],
  )

-  function onChangeBuyAsset(asset: Asset) {
-    props.onChangeBuyAsset(asset)
+  function onChangeBuyAsset(asset: AssetPair | Asset) {
+    const selectedAsset = asset as Asset
+    if (!props.onChangeBuyAsset) return
+    props.onChangeBuyAsset(selectedAsset)
    props.onChangeState('sell')
    onChangeSearch('')
  }

-  function onChangeSellAsset(asset: Asset) {
-    props.onChangeSellAsset(asset)
+  function onChangeSellAsset(asset: AssetPair | Asset) {
+    const selectedAsset = asset as Asset
+    if (!props.onChangeSellAsset) return
+    props.onChangeSellAsset(selectedAsset)
+    onChangeSearch('')
+  }
+
+  function onChangeAssetPair(assetPair: AssetPair | Asset) {
+    const selectedPair = assetPair as AssetPair
+    if (!props.onChangeTradingPair) return
+    props.onChangeTradingPair({ buy: selectedPair.buy.denom, sell: selectedPair.sell.denom })
+    props.onChangeState('closed')
    onChangeSearch('')
  }

@ -54,9 +109,16 @@ export default function AssetOverlay(props: Props) {
      setShow={handleClose}
    >
      <div className='flex justify-between p-4 overflow-hidden'>
-        <Text>Select asset</Text>
+        <Text>{isPairSelector ? 'Select a market' : 'Select asset'}</Text>
        <EscButton onClick={handleClose} enableKeyPress />
      </div>
+      {isPairSelector && (
+        <StablesFilter
+          stables={stableAssets}
+          selectedStables={selectedStables}
+          onFilter={setSelectedStables}
+        />
+      )}
      <Divider />
      <div className='p-4'>
        <SearchBar
@ -68,20 +130,32 @@ export default function AssetOverlay(props: Props) {
        />
      </div>
      <Divider />
-      <AssetList
-        type='buy'
-        assets={buyAssets}
-        isOpen={props.state === 'buy'}
-        toggleOpen={handleToggle}
-        onChangeAsset={onChangeBuyAsset}
-      />
-      <AssetList
-        type='sell'
-        assets={sellAssets}
-        isOpen={props.state === 'sell'}
-        toggleOpen={handleToggle}
-        onChangeAsset={onChangeSellAsset}
-      />
+      {isPairSelector ? (
+        <PairsList
+          assets={buyAssets}
+          stables={selectedStables}
+          isOpen={props.state === 'pair'}
+          toggleOpen={handleToggle}
+          onChangeAssetPair={onChangeAssetPair}
+        />
+      ) : (
+        <>
+          <AssetList
+            type='buy'
+            assets={buyAssets}
+            isOpen={props.state === 'buy'}
+            toggleOpen={handleToggle}
+            onChangeAsset={onChangeBuyAsset}
+          />
+          <AssetList
+            type='sell'
+            assets={sellAssets}
+            isOpen={props.state === 'sell'}
+            toggleOpen={handleToggle}
+            onChangeAsset={onChangeSellAsset}
+          />
+        </>
+      )}
    </Overlay>
  )
 }
--- a/src/components/Trade/TradeModule/AssetSelector/AssetSelectorItem.tsx
+++ b/src/components/Trade/TradeModule/AssetSelector/AssetSelectorItem.tsx
@ -0,0 +1,129 @@
+import { useMemo } from 'react'
+
+import AssetImage from 'components/Asset/AssetImage'
+import AssetSymbol from 'components/Asset/AssetSymbol'
+import DisplayCurrency from 'components/DisplayCurrency'
+import { FormattedNumber } from 'components/FormattedNumber'
+import { StarFilled, StarOutlined } from 'components/Icons'
+import Text from 'components/Text'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
+import { BN_ONE, BN_ZERO, MAX_AMOUNT_DECIMALS, MIN_AMOUNT } from 'constants/math'
+import useLocalStorage from 'hooks/useLocalStorage'
+import { BNCoin } from 'types/classes/BNCoin'
+import { byDenom } from 'utils/array'
+import { demagnify, formatAmountToPrecision } from 'utils/formatters'
+
+interface Props {
+  asset: Asset
+  sellAsset?: Asset
+  balances: BNCoin[]
+  onSelect: (selected: Asset | AssetPair) => void
+  depositCap?: DepositCap
+}
+export default function AssetSelectorItem(props: Props) {
+  const { asset, sellAsset, balances, onSelect, depositCap } = props
+
+  const amount = demagnify(props.balances.find(byDenom(asset.denom))?.amount ?? BN_ZERO, asset)
+
+  const [favoriteAssetsDenoms, setFavoriteAssetsDenoms] = useLocalStorage<string[]>(
+    LocalStorageKeys.FAVORITE_ASSETS,
+    [],
+  )
+
+  function handleToggleFavorite(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    event.stopPropagation()
+
+    if (!favoriteAssetsDenoms.includes(asset.denom)) {
+      setFavoriteAssetsDenoms([...favoriteAssetsDenoms, asset.denom])
+      return
+    }
+    setFavoriteAssetsDenoms(favoriteAssetsDenoms.filter((item: string) => item !== asset.denom))
+  }
+  const formattedAmount = formatAmountToPrecision(amount, MAX_AMOUNT_DECIMALS)
+  const lowAmount = formattedAmount === 0 ? 0 : Math.max(formattedAmount, MIN_AMOUNT)
+
+  const capLeft = useMemo(() => {
+    if (!props.depositCap) return 0
+    const percent = props.depositCap.used.dividedBy(props.depositCap.max).multipliedBy(100)
+    const depositCapLeft = 100 - Math.min(percent.toNumber(), 100)
+    return depositCapLeft
+  }, [props.depositCap])
+
+  return (
+    <li className='border-b border-white/10 hover:bg-black/10'>
+      <button
+        onClick={() => onSelect(sellAsset ? { buy: asset, sell: sellAsset } : asset)}
+        className='flex items-center justify-between w-full gap-2 p-4'
+      >
+        <div className='flex items-center gap-2'>
+          <div onClick={handleToggleFavorite}>
+            {asset.isFavorite ? <StarFilled width={16} /> : <StarOutlined width={16} />}
+          </div>
+          <AssetImage asset={asset} size={24} />
+          <div className='flex-col'>
+            <div className='flex gap-1 flex-nowrap max-w-[185px]'>
+              {sellAsset ? (
+                <Text size='sm' className='h-5 leading-5 text-left text-white/60'>
+                  <span className='text-white'>{asset.symbol}</span>/{sellAsset.symbol}
+                </Text>
+              ) : (
+                <>
+                  <Text size='sm' className='h-5 leading-5 text-left truncate '>
+                    {asset.name}
+                  </Text>
+                  <AssetSymbol symbol={asset.symbol} />
+                </>
+              )}
+            </div>
+            {balances.length > 0 && (
+              <div className='flex gap-1'>
+                <span className='text-xs text-left text-white/80'>Balance: </span>
+                {amount >= 1 ? (
+                  <FormattedNumber
+                    className='text-xs text-left text-white/80'
+                    amount={amount}
+                    options={{ abbreviated: true, maxDecimals: MAX_AMOUNT_DECIMALS }}
+                    animate
+                  />
+                ) : (
+                  <FormattedNumber
+                    className='text-xs text-left text-white/80'
+                    smallerThanThreshold={formattedAmount !== 0 && formattedAmount < MIN_AMOUNT}
+                    amount={lowAmount}
+                    options={{
+                      maxDecimals: MAX_AMOUNT_DECIMALS,
+                      minDecimals: 0,
+                    }}
+                    animate
+                  />
+                )}
+              </div>
+            )}
+            {depositCap && capLeft <= 15 && (
+              <div className='flex gap-1'>
+                <span className='text-xs text-left text-white/60'>Cap Left: </span>
+                <DisplayCurrency
+                  className='text-xs text-left text-info/60'
+                  coin={BNCoin.fromDenomAndBigNumber(
+                    depositCap.denom,
+                    depositCap.max.minus(depositCap.used),
+                  )}
+                  options={{ suffix: ` (${capLeft.toFixed(2)}%)` }}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+        <DisplayCurrency
+          className='text-sm'
+          coin={
+            new BNCoin({
+              denom: asset.denom,
+              amount: BN_ONE.shiftedBy(asset.decimals).toString(),
+            })
+          }
+        />
+      </button>
+    </li>
+  )
+}
--- a/src/components/Trade/TradeModule/AssetSelector/AssetSelectorPair.tsx
+++ b/src/components/Trade/TradeModule/AssetSelector/AssetSelectorPair.tsx
@ -0,0 +1,59 @@
+import { useCallback } from 'react'
+
+import Button from 'components/Button'
+import { ChevronDown } from 'components/Icons'
+import Text from 'components/Text'
+import AssetOverlay from 'components/Trade/TradeModule/AssetSelector/AssetOverlay'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
+import useLocalStorage from 'hooks/useLocalStorage'
+import useStore from 'store'
+
+interface Props {
+  buyAsset: Asset
+  sellAsset: Asset
+}
+
+export default function AssetSelectorPair(props: Props) {
+  const [tradingPairSimple, setTradingPairSimple] = useLocalStorage<Settings['tradingPairSimple']>(
+    LocalStorageKeys.TRADING_PAIR_SIMPLE,
+    DEFAULT_SETTINGS.tradingPairSimple,
+  )
+  const { buyAsset, sellAsset } = props
+  const assetOverlayState = useStore((s) => s.assetOverlayState)
+
+  const onChangeTradingPair = useCallback(
+    (tradingPair: TradingPair) => {
+      console.log(tradingPair.buy, tradingPair.sell)
+      setTradingPairSimple(tradingPair)
+    },
+    [setTradingPairSimple],
+  )
+
+  const handleChangeState = useCallback((state: OverlayState) => {
+    useStore.setState({ assetOverlayState: state })
+  }, [])
+
+  return (
+    <div className='flex items-center justify-between w-full p-3 bg-white/5'>
+      <Text size='sm' className='text-white/60'>
+        <span className='text-white'>{buyAsset.symbol}</span>/{sellAsset.symbol}
+      </Text>
+      <Button
+        onClick={() => useStore.setState({ assetOverlayState: 'pair' })}
+        text='all markets'
+        color='quaternary'
+        variant='transparent'
+        className='pr-0'
+        rightIcon={<ChevronDown className='w-3 h-3' />}
+      />
+      <AssetOverlay
+        state={assetOverlayState}
+        onChangeState={handleChangeState}
+        buyAsset={buyAsset}
+        sellAsset={sellAsset}
+        onChangeTradingPair={onChangeTradingPair}
+      />
+    </div>
+  )
+}
--- a/src/components/Trade/TradeModule/AssetSelector/AssetSelectorSingle.tsx
+++ b/src/components/Trade/TradeModule/AssetSelector/AssetSelectorSingle.tsx
@ -14,32 +14,31 @@ interface Props {
  sellAsset: Asset
 }

-export default function AssetSelector(props: Props) {
-  const [tradingPair, setTradingPair] = useLocalStorage<Settings['tradingPair']>(
-    LocalStorageKeys.TRADING_PAIR,
-    DEFAULT_SETTINGS.tradingPair,
-  )
+export default function AssetSelectorSingle(props: Props) {
+  const [tradingPairAdvanced, settradingPairAdvanced] = useLocalStorage<
+    Settings['tradingPairAdvanced']
+  >(LocalStorageKeys.TRADING_PAIR_ADVANCED, DEFAULT_SETTINGS.tradingPairAdvanced)
  const { buyAsset, sellAsset } = props
  const assetOverlayState = useStore((s) => s.assetOverlayState)

  const handleSwapAssets = useCallback(() => {
-    setTradingPair({ buy: sellAsset.denom, sell: buyAsset.denom })
-  }, [setTradingPair, sellAsset, buyAsset])
+    settradingPairAdvanced({ buy: sellAsset.denom, sell: buyAsset.denom })
+  }, [settradingPairAdvanced, sellAsset, buyAsset])

  const handleChangeBuyAsset = useCallback(
    (asset: Asset) => {
-      setTradingPair({ buy: asset.denom, sell: sellAsset.denom })
+      settradingPairAdvanced({ buy: asset.denom, sell: sellAsset.denom })
      useStore.setState({ assetOverlayState: 'sell' })
    },
-    [setTradingPair, sellAsset],
+    [settradingPairAdvanced, sellAsset],
  )

  const handleChangeSellAsset = useCallback(
    (asset: Asset) => {
-      setTradingPair({ buy: buyAsset.denom, sell: asset.denom })
+      settradingPairAdvanced({ buy: buyAsset.denom, sell: asset.denom })
      useStore.setState({ assetOverlayState: 'closed' })
    },
-    [setTradingPair, buyAsset],
+    [settradingPairAdvanced, buyAsset],
  )

  const handleChangeState = useCallback((state: OverlayState) => {
@ -47,7 +46,7 @@ export default function AssetSelector(props: Props) {
  }, [])

  return (
-    <div className='grid-rows-auto grid grid-cols-[1fr_min-content_1fr] gap-y-2 bg-white/5 p-3'>
+    <div className='grid-rows-auto grid grid-cols-[1fr_min-content_1fr] gap-y-2 bg-white/5 p-3 w-full'>
      <Text size='sm'>Buy</Text>
      <Text size='sm' className='col-start-3'>
        Sell
--- a/src/components/Trade/TradeModule/AssetSelector/PairsList.tsx
+++ b/src/components/Trade/TradeModule/AssetSelector/PairsList.tsx
@ -0,0 +1,73 @@
+import { useMemo } from 'react'
+
+import Text from 'components/Text'
+import AssetSelectorItem from 'components/Trade/TradeModule/AssetSelector/AssetSelectorItem'
+import { ASSETS } from 'constants/assets'
+import useCurrentAccount from 'hooks/useCurrentAccount'
+import useMarketAssets from 'hooks/useMarketAssets'
+import useMarketDeposits from 'hooks/useMarketDeposits'
+import usePrices from 'hooks/usePrices'
+import { getMergedBalancesForAsset } from 'utils/accounts'
+import { byDenom } from 'utils/array'
+import { getEnabledMarketAssets, sortAssetsOrPairs } from 'utils/assets'
+
+interface Props {
+  assets: Asset[]
+  stables: Asset[]
+  isOpen: boolean
+  toggleOpen: () => void
+  onChangeAssetPair: (assetPair: AssetPair | Asset) => void
+}
+
+const baseDenom = ASSETS[0].denom
+
+export default function PairsList(props: Props) {
+  const account = useCurrentAccount()
+  const { data: marketAssets } = useMarketAssets()
+  const { data: marketDeposits } = useMarketDeposits()
+  const { data: prices } = usePrices()
+  const balances = useMemo(() => {
+    if (!account) return []
+    return getMergedBalancesForAsset(account, getEnabledMarketAssets())
+  }, [account])
+
+  const pairs = useMemo(() => {
+    const tradingPairs: AssetPair[] = []
+    props.stables.forEach((stable) => {
+      props.assets.forEach((buyAsset) => {
+        if (buyAsset.denom === stable.denom) return
+        tradingPairs.push({ buy: buyAsset, sell: stable })
+      })
+    })
+    return tradingPairs
+  }, [props.stables, props.assets])
+
+  const sortedPairs = useMemo(
+    () => sortAssetsOrPairs(pairs, prices, marketDeposits, balances, baseDenom) as AssetPair[],
+    [balances, prices, pairs, marketDeposits],
+  )
+
+  return (
+    <section>
+      {props.isOpen &&
+        (props.assets.length === 0 ? (
+          <Text size='xs' className='p-4'>
+            No available assets found
+          </Text>
+        ) : (
+          <ul>
+            {sortedPairs.map((assetPair) => (
+              <AssetSelectorItem
+                balances={balances}
+                key={`${assetPair.buy.symbol}-${assetPair.sell.symbol}`}
+                onSelect={props.onChangeAssetPair}
+                depositCap={marketAssets?.find(byDenom(assetPair.buy.denom))?.cap}
+                asset={assetPair.buy}
+                sellAsset={assetPair.sell}
+              />
+            ))}
+          </ul>
+        ))}
+    </section>
+  )
+}
--- a/src/components/Trade/TradeModule/SwapForm/MarginToggle.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/MarginToggle.tsx
@ -12,7 +12,7 @@ interface Props {

 export default function MarginToggle(props: Props) {
  return (
-    <div className='flex flex-row justify-between flex-1 px-4 py-2 bg-white/5'>
+    <div className='flex justify-between w-full px-4 py-2 bg-white/5'>
      <Text size='sm'>Margin</Text>

      <ConditionalWrapper
--- a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
@ -34,6 +34,8 @@ interface Props {
  sellAmount: BigNumber
  sellAsset: Asset
  showProgressIndicator: boolean
+  isAdvanced?: boolean
+  direction?: OrderDirection
 }

 const infoLineClasses = 'flex flex-row justify-between flex-1 mb-1 text-xs text-white'
@ -53,6 +55,8 @@ export default function TradeSummary(props: Props) {
    route,
    sellAmount,
    buyAmount,
+    isAdvanced,
+    direction,
  } = props
  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)

@ -80,10 +84,10 @@ export default function TradeSummary(props: Props) {
    return routeSymbols.join(' -> ')
  }, [route, sellAsset.symbol])

-  const buttonText = useMemo(
-    () => (route.length ? `Buy ${buyAsset.symbol}` : 'No route found'),
-    [buyAsset.symbol, route],
-  )
+  const buttonText = useMemo(() => {
+    if (!isAdvanced && direction === 'sell') return `Sell ${sellAsset.symbol}`
+    return route.length ? `Buy ${buyAsset.symbol}` : 'No route found'
+  }, [buyAsset.symbol, route, sellAsset.symbol, isAdvanced, direction])

  return (
    <div
--- a/src/components/Trade/TradeModule/SwapForm/index.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/index.tsx
@ -4,8 +4,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import estimateExactIn from 'api/swap/estimateExactIn'
 import AvailableLiquidityMessage from 'components/AvailableLiquidityMessage'
 import DepositCapMessage from 'components/DepositCapMessage'
+import { DirectionSelect } from 'components/DirectionSelect'
 import Divider from 'components/Divider'
 import RangeInput from 'components/RangeInput'
+import Text from 'components/Text'
+import AssetSelectorPair from 'components/Trade/TradeModule/AssetSelector/AssetSelectorPair'
+import AssetSelectorSingle from 'components/Trade/TradeModule/AssetSelector/AssetSelectorSingle'
 import AssetAmountInput from 'components/Trade/TradeModule/SwapForm/AssetAmountInput'
 import AutoRepayToggle from 'components/Trade/TradeModule/SwapForm/AutoRepayToggle'
 import MarginToggle from 'components/Trade/TradeModule/SwapForm/MarginToggle'
@ -28,34 +32,45 @@ import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
 import { defaultFee, ENABLE_AUTO_REPAY } from 'utils/constants'
+import { formatValue } from 'utils/formatters'
 import { getCapLeftWithBuffer } from 'utils/generic'
 import { asyncThrottle, BN } from 'utils/helpers'

 interface Props {
  buyAsset: Asset
  sellAsset: Asset
+  isAdvanced: boolean
 }

 export default function SwapForm(props: Props) {
-  const { buyAsset, sellAsset } = props
+  const { buyAsset, sellAsset, isAdvanced } = props
  const useMargin = useStore((s) => s.useMargin)
  const useAutoRepay = useStore((s) => s.useAutoRepay)
  const account = useCurrentAccount()
  const swap = useStore((s) => s.swap)
  const [slippage] = useLocalStorage(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
  const { computeMaxSwapAmount } = useHealthComputer(account)
+  const [orderDirection, setOrderDirection] = useState<OrderDirection>('buy')
  const { data: borrowAssets } = useMarketBorrowings()
  const { data: marketAssets } = useMarketAssets()
-  const { data: route, isLoading: isRouteLoading } = useSwapRoute(sellAsset.denom, buyAsset.denom)
-  const isBorrowEnabled = !!marketAssets.find(byDenom(sellAsset.denom))?.borrowEnabled
-  const isRepayable = !!account?.debts.find(byDenom(buyAsset.denom))
+  const [inputAsset, outputAsset] = useMemo(() => {
+    if (isAdvanced) return [sellAsset, buyAsset]
+    if (orderDirection === 'buy') return [sellAsset, buyAsset]
+    return [buyAsset, sellAsset]
+  }, [buyAsset, sellAsset, orderDirection, isAdvanced])
+  const { data: route, isLoading: isRouteLoading } = useSwapRoute(
+    inputAsset.denom,
+    outputAsset.denom,
+  )
+  const isBorrowEnabled = !!marketAssets.find(byDenom(inputAsset.denom))?.borrowEnabled
+  const isRepayable = !!account?.debts.find(byDenom(outputAsset.denom))
  const [isMarginChecked, setMarginChecked] = useToggle(isBorrowEnabled ? useMargin : false)
  const [isAutoRepayChecked, setAutoRepayChecked] = useToggle(
    isRepayable && ENABLE_AUTO_REPAY ? useAutoRepay : false,
  )
-  const [buyAssetAmount, setBuyAssetAmount] = useState(BN_ZERO)
-  const [sellAssetAmount, setSellAssetAmount] = useState(BN_ZERO)
-  const [maxBuyableAmountEstimation, setMaxBuyableAmountEstimation] = useState(BN_ZERO)
+  const [outputAssetAmount, setOutputAssetAmount] = useState(BN_ZERO)
+  const [inputAssetAmount, setInputAssetAmount] = useState(BN_ZERO)
+  const [maxOutputAmountEstimation, setMaxBuyableAmountEstimation] = useState(BN_ZERO)
  const [selectedOrderType, setSelectedOrderType] = useState<AvailableOrderType>('Market')
  const [isConfirming, setIsConfirming] = useToggle()
  const [estimatedFee, setEstimatedFee] = useState(defaultFee)
@ -66,117 +81,107 @@ export default function SwapForm(props: Props) {
  const throttledEstimateExactIn = useMemo(() => asyncThrottle(estimateExactIn, 250), [])
  const { computeLiquidationPrice } = useHealthComputer(updatedAccount)

-  const borrowAsset = useMemo(
-    () => borrowAssets.find(byDenom(sellAsset.denom)),
-    [borrowAssets, sellAsset.denom],
-  )
-
  const depositCapReachedCoins: BNCoin[] = useMemo(() => {
-    const buyMarketAsset = marketAssets.find(byDenom(buyAsset.denom))
+    const outputMarketAsset = marketAssets.find(byDenom(outputAsset.denom))

-    if (!buyMarketAsset) return []
+    if (!outputMarketAsset) return []

-    const depositCapLeft = getCapLeftWithBuffer(buyMarketAsset.cap)
-    if (buyAssetAmount.isGreaterThan(depositCapLeft)) {
-      return [BNCoin.fromDenomAndBigNumber(buyAsset.denom, depositCapLeft)]
+    const depositCapLeft = getCapLeftWithBuffer(outputMarketAsset.cap)
+    if (outputAssetAmount.isGreaterThan(depositCapLeft)) {
+      return [BNCoin.fromDenomAndBigNumber(outputAsset.denom, depositCapLeft)]
    }

    return []
-  }, [marketAssets, buyAsset.denom, buyAssetAmount])
+  }, [marketAssets, outputAsset.denom, outputAssetAmount])

-  const onChangeSellAmount = useCallback(
+  const onChangeInputAmount = useCallback(
    (amount: BigNumber) => {
-      setSellAssetAmount(amount)
-      throttledEstimateExactIn(
-        { denom: sellAsset.denom, amount: amount.toString() },
-        buyAsset.denom,
-      ).then(setBuyAssetAmount)
+      setInputAssetAmount(amount)
+      const swapTo = { denom: inputAsset.denom, amount: amount.toString() }
+      throttledEstimateExactIn(swapTo, outputAsset.denom).then(setOutputAssetAmount)
    },
-    [sellAsset.denom, throttledEstimateExactIn, buyAsset.denom],
+    [inputAsset.denom, throttledEstimateExactIn, outputAsset.denom],
  )

-  const onChangeBuyAmount = useCallback(
+  const onChangeOutputAmount = useCallback(
    (amount: BigNumber) => {
-      setBuyAssetAmount(amount)
+      setOutputAssetAmount(amount)
      const swapFrom = {
-        denom: buyAsset.denom,
+        denom: outputAsset.denom,
        amount: amount.toString(),
      }
-      throttledEstimateExactIn(swapFrom, sellAsset.denom).then(setSellAssetAmount)
+      throttledEstimateExactIn(swapFrom, inputAsset.denom).then(setInputAssetAmount)
    },
-    [buyAsset.denom, throttledEstimateExactIn, sellAsset.denom],
+    [outputAsset.denom, throttledEstimateExactIn, inputAsset.denom],
  )

  const handleRangeInputChange = useCallback(
    (value: number) => {
-      onChangeBuyAmount(BN(value).shiftedBy(buyAsset.decimals).integerValue())
+      onChangeOutputAmount(BN(value).shiftedBy(outputAsset.decimals).integerValue())
    },
-    [onChangeBuyAmount, buyAsset.decimals],
+    [onChangeOutputAmount, outputAsset.decimals],
  )

-  const [maxSellAmount, sellSideMarginThreshold, marginRatio] = useMemo(() => {
-    const maxAmount = computeMaxSwapAmount(sellAsset.denom, buyAsset.denom, 'default')
+  const [maxInputAmount, imputMarginThreshold, marginRatio] = useMemo(() => {
+    const maxAmount = computeMaxSwapAmount(inputAsset.denom, outputAsset.denom, 'default')
    const maxAmountOnMargin = computeMaxSwapAmount(
-      sellAsset.denom,
-      buyAsset.denom,
+      inputAsset.denom,
+      outputAsset.denom,
      'margin',
    ).integerValue()
    const marginRatio = maxAmount.dividedBy(maxAmountOnMargin)

    estimateExactIn(
      {
-        denom: sellAsset.denom,
+        denom: inputAsset.denom,
        amount: (isMarginChecked ? maxAmountOnMargin : maxAmount).toString(),
      },
-      buyAsset.denom,
+      outputAsset.denom,
    ).then(setMaxBuyableAmountEstimation)

    if (isMarginChecked) return [maxAmountOnMargin, maxAmount, marginRatio]

-    if (sellAssetAmount.isGreaterThan(maxAmount)) onChangeSellAmount(maxAmount)
+    if (inputAssetAmount.isGreaterThan(maxAmount)) onChangeInputAmount(maxAmount)

    return [maxAmount, maxAmount, marginRatio]
  }, [
    computeMaxSwapAmount,
-    sellAsset.denom,
-    buyAsset.denom,
+    inputAsset.denom,
+    outputAsset.denom,
    isMarginChecked,
-    onChangeSellAmount,
-    sellAssetAmount,
+    onChangeInputAmount,
+    inputAssetAmount,
  ])

-  const buySideMarginThreshold = useMemo(() => {
-    return maxBuyableAmountEstimation.multipliedBy(marginRatio)
-  }, [marginRatio, maxBuyableAmountEstimation])
+  const outputSideMarginThreshold = useMemo(() => {
+    return maxOutputAmountEstimation.multipliedBy(marginRatio)
+  }, [marginRatio, maxOutputAmountEstimation])

  const swapTx = useMemo(() => {
-    const borrowCoin = sellAssetAmount.isGreaterThan(sellSideMarginThreshold)
-      ? BNCoin.fromDenomAndBigNumber(
-          sellAsset.denom,
-          sellAssetAmount.minus(sellSideMarginThreshold),
-        )
+    const borrowCoin = inputAssetAmount.isGreaterThan(imputMarginThreshold)
+      ? BNCoin.fromDenomAndBigNumber(inputAsset.denom, inputAssetAmount.minus(imputMarginThreshold))
      : undefined

    return swap({
      accountId: account?.id || '',
-      coinIn: BNCoin.fromDenomAndBigNumber(sellAsset.denom, sellAssetAmount.integerValue()),
+      coinIn: BNCoin.fromDenomAndBigNumber(inputAsset.denom, inputAssetAmount.integerValue()),
      reclaim: removedLends[0],
      borrow: borrowCoin,
-      denomOut: buyAsset.denom,
+      denomOut: outputAsset.denom,
      slippage,
-      isMax: sellAssetAmount.isEqualTo(maxSellAmount),
+      isMax: inputAssetAmount.isEqualTo(maxInputAmount),
      repay: isAutoRepayChecked,
    })
  }, [
    removedLends,
    account?.id,
-    buyAsset.denom,
-    sellSideMarginThreshold,
-    sellAsset.denom,
-    sellAssetAmount,
+    outputAsset.denom,
+    imputMarginThreshold,
+    inputAsset.denom,
+    inputAssetAmount,
    slippage,
    swap,
-    maxSellAmount,
+    maxInputAmount,
    isAutoRepayChecked,
  ])

@ -210,61 +215,10 @@ export default function SwapForm(props: Props) {
  )

  const liquidationPrice = useMemo(
-    () => computeLiquidationPrice(props.buyAsset.denom, 'asset'),
-    [computeLiquidationPrice, props.buyAsset.denom],
+    () => computeLiquidationPrice(outputAsset.denom, 'asset'),
+    [computeLiquidationPrice, outputAsset.denom],
  )

-  useEffect(() => {
-    setBuyAssetAmount(BN_ZERO)
-    setSellAssetAmount(BN_ZERO)
-    setMarginChecked(isBorrowEnabled ? useMargin : false)
-    setAutoRepayChecked(isRepayable ? useAutoRepay : false)
-    simulateTrade(
-      BNCoin.fromDenomAndBigNumber(buyAsset.denom, BN_ZERO),
-      BNCoin.fromDenomAndBigNumber(sellAsset.denom, BN_ZERO),
-      BNCoin.fromDenomAndBigNumber(sellAsset.denom, BN_ZERO),
-      isAutoLendEnabled && !isAutoRepayChecked ? 'lend' : 'deposit',
-      isAutoRepayChecked,
-    )
-  }, [
-    isBorrowEnabled,
-    isRepayable,
-    useMargin,
-    useAutoRepay,
-    buyAsset.denom,
-    sellAsset.denom,
-    isAutoLendEnabled,
-    isAutoRepayChecked,
-    simulateTrade,
-    setMarginChecked,
-    setAutoRepayChecked,
-  ])
-
-  useEffect(() => {
-    const removeDepositAmount = sellAssetAmount.isGreaterThanOrEqualTo(sellSideMarginThreshold)
-      ? sellSideMarginThreshold
-      : sellAssetAmount
-    const addDebtAmount = sellAssetAmount.isGreaterThan(sellSideMarginThreshold)
-      ? sellAssetAmount.minus(sellSideMarginThreshold)
-      : BN_ZERO
-
-    if (removeDepositAmount.isZero() && addDebtAmount.isZero() && buyAssetAmount.isZero() && modal)
-      return
-    const removeCoin = BNCoin.fromDenomAndBigNumber(sellAsset.denom, removeDepositAmount)
-    const debtCoin = BNCoin.fromDenomAndBigNumber(sellAsset.denom, addDebtAmount)
-    const addCoin = BNCoin.fromDenomAndBigNumber(buyAsset.denom, buyAssetAmount)
-
-    debouncedUpdateAccount(removeCoin, addCoin, debtCoin)
-  }, [
-    sellAssetAmount,
-    buyAssetAmount,
-    sellSideMarginThreshold,
-    buyAsset.denom,
-    sellAsset.denom,
-    debouncedUpdateAccount,
-    modal,
-  ])
-
  useEffect(() => {
    swapTx.estimateFee().then(setEstimatedFee)
  }, [swapTx])
@ -276,24 +230,90 @@ export default function SwapForm(props: Props) {
      const isSucceeded = await swapTx.execute()

      if (isSucceeded) {
-        setSellAssetAmount(BN_ZERO)
-        setBuyAssetAmount(BN_ZERO)
+        setInputAssetAmount(BN_ZERO)
+        setOutputAssetAmount(BN_ZERO)
      }
      setIsConfirming(false)
    }
  }, [account?.id, swapTx, setIsConfirming])

  useEffect(() => {
-    if (sellAssetAmount.isEqualTo(maxSellAmount) || buyAssetAmount.isZero()) return
-    if (buyAssetAmount.isEqualTo(maxBuyableAmountEstimation)) setSellAssetAmount(maxSellAmount)
-  }, [sellAssetAmount, maxSellAmount, buyAssetAmount, maxBuyableAmountEstimation])
+    onChangeOutputAmount(BN_ZERO)
+    onChangeInputAmount(BN_ZERO)
+  }, [orderDirection, onChangeOutputAmount, onChangeInputAmount])
+
+  useEffect(() => {
+    setOutputAssetAmount(BN_ZERO)
+    setInputAssetAmount(BN_ZERO)
+    setMarginChecked(isBorrowEnabled ? useMargin : false)
+    setAutoRepayChecked(isRepayable ? useAutoRepay : false)
+    simulateTrade(
+      BNCoin.fromDenomAndBigNumber(inputAsset.denom, BN_ZERO),
+      BNCoin.fromDenomAndBigNumber(outputAsset.denom, BN_ZERO),
+      BNCoin.fromDenomAndBigNumber(inputAsset.denom, BN_ZERO),
+      isAutoLendEnabled && !isAutoRepayChecked ? 'lend' : 'deposit',
+      isAutoRepayChecked,
+    )
+  }, [
+    isBorrowEnabled,
+    isRepayable,
+    useMargin,
+    useAutoRepay,
+    outputAsset.denom,
+    inputAsset.denom,
+    isAutoLendEnabled,
+    isAutoRepayChecked,
+    simulateTrade,
+    setMarginChecked,
+    setAutoRepayChecked,
+  ])
+
+  useEffect(() => {
+    const removeDepositAmount = inputAssetAmount.isGreaterThanOrEqualTo(imputMarginThreshold)
+      ? imputMarginThreshold
+      : inputAssetAmount
+    const addDebtAmount = inputAssetAmount.isGreaterThan(imputMarginThreshold)
+      ? inputAssetAmount.minus(imputMarginThreshold)
+      : BN_ZERO
+
+    if (
+      removeDepositAmount.isZero() &&
+      addDebtAmount.isZero() &&
+      outputAssetAmount.isZero() &&
+      modal
+    )
+      return
+    const removeCoin = BNCoin.fromDenomAndBigNumber(inputAsset.denom, removeDepositAmount)
+    const addCoin = BNCoin.fromDenomAndBigNumber(outputAsset.denom, outputAssetAmount)
+    const debtCoin = BNCoin.fromDenomAndBigNumber(inputAsset.denom, addDebtAmount)
+
+    debouncedUpdateAccount(removeCoin, addCoin, debtCoin)
+  }, [
+    inputAssetAmount,
+    outputAssetAmount,
+    imputMarginThreshold,
+    outputAsset.denom,
+    inputAsset.denom,
+    debouncedUpdateAccount,
+    modal,
+  ])
+
+  const borrowAsset = useMemo(
+    () => borrowAssets.find(byDenom(inputAsset.denom)),
+    [borrowAssets, inputAsset.denom],
+  )
+
+  useEffect(() => {
+    if (inputAssetAmount.isEqualTo(maxInputAmount) || outputAssetAmount.isZero()) return
+    if (outputAssetAmount.isEqualTo(maxOutputAmountEstimation)) setInputAssetAmount(maxInputAmount)
+  }, [inputAssetAmount, maxInputAmount, outputAssetAmount, maxOutputAmountEstimation])

  const borrowAmount = useMemo(
    () =>
-      sellAssetAmount.isGreaterThan(sellSideMarginThreshold)
-        ? sellAssetAmount.minus(sellSideMarginThreshold)
+      inputAssetAmount.isGreaterThan(imputMarginThreshold)
+        ? inputAssetAmount.minus(imputMarginThreshold)
        : BN_ZERO,
-    [sellAssetAmount, sellSideMarginThreshold],
+    [inputAssetAmount, imputMarginThreshold],
  )

  const availableLiquidity = useMemo(
@ -303,79 +323,125 @@ export default function SwapForm(props: Props) {

  const isSwapDisabled = useMemo(
    () =>
-      sellAssetAmount.isZero() ||
+      inputAssetAmount.isZero() ||
      depositCapReachedCoins.length > 0 ||
      borrowAmount.isGreaterThan(availableLiquidity) ||
      route.length === 0,
-    [sellAssetAmount, depositCapReachedCoins, borrowAmount, availableLiquidity, route],
+    [inputAssetAmount, depositCapReachedCoins, borrowAmount, availableLiquidity, route],
  )

  return (
    <>
-      <Divider />
-      <MarginToggle
-        checked={isMarginChecked}
-        onChange={handleMarginToggleChange}
-        disabled={!borrowAsset?.isMarket}
-        borrowAssetSymbol={sellAsset.symbol}
-      />
-      <Divider />
-
-      {isRepayable && ENABLE_AUTO_REPAY && (
-        <AutoRepayToggle
-          checked={isAutoRepayChecked}
-          onChange={handleAutoRepayToggleChange}
-          buyAssetSymbol={buyAsset.symbol}
+      <div className='flex flex-wrap w-full'>
+        {isAdvanced ? (
+          <AssetSelectorSingle buyAsset={outputAsset} sellAsset={inputAsset} />
+        ) : (
+          <AssetSelectorPair buyAsset={buyAsset} sellAsset={sellAsset} />
+        )}
+        <Divider />
+        <MarginToggle
+          checked={isMarginChecked}
+          onChange={handleMarginToggleChange}
+          disabled={!borrowAsset?.isMarket}
+          borrowAssetSymbol={inputAsset.symbol}
        />
-      )}
-      <Divider />
-      <div className='px-3'>
-        <OrderTypeSelector selected={selectedOrderType} onChange={setSelectedOrderType} />
-      </div>
-      <div className='flex flex-col gap-6 px-3 mt-6'>
-        <AssetAmountInput
-          label='Buy'
-          max={maxBuyableAmountEstimation}
-          amount={buyAssetAmount}
-          setAmount={onChangeBuyAmount}
-          asset={buyAsset}
-          maxButtonLabel='Max Amount:'
-          disabled={isConfirming}
-        />
-
-        <RangeInput
-          disabled={isConfirming || maxBuyableAmountEstimation.isZero()}
-          onChange={handleRangeInputChange}
-          value={buyAssetAmount.shiftedBy(-buyAsset.decimals).toNumber()}
-          max={maxBuyableAmountEstimation.shiftedBy(-buyAsset.decimals).toNumber()}
-          marginThreshold={
-            isMarginChecked
-              ? buySideMarginThreshold.shiftedBy(-buyAsset.decimals).toNumber()
-              : undefined
-          }
-        />
-
-        <DepositCapMessage action='buy' coins={depositCapReachedCoins} className='p-4 bg-white/5' />
-
-        {borrowAsset && borrowAmount.isGreaterThanOrEqualTo(availableLiquidity) && (
-          <AvailableLiquidityMessage
-            availableLiquidity={borrowAsset?.liquidity?.amount ?? BN_ZERO}
-            asset={borrowAsset}
+        <Divider />
+        {isRepayable && ENABLE_AUTO_REPAY && (
+          <AutoRepayToggle
+            checked={isAutoRepayChecked}
+            onChange={handleAutoRepayToggleChange}
+            buyAssetSymbol={outputAsset.symbol}
          />
        )}
-        <AssetAmountInput
-          label='Sell'
-          max={maxSellAmount}
-          amount={sellAssetAmount}
-          setAmount={onChangeSellAmount}
-          asset={sellAsset}
-          maxButtonLabel='Balance:'
-          disabled={isConfirming}
-        />
+        <div className='px-3'>
+          <OrderTypeSelector selected={selectedOrderType} onChange={setSelectedOrderType} />
+        </div>
+        <div className='flex flex-col w-full gap-6 px-3 mt-6'>
+          {isAdvanced ? (
+            <AssetAmountInput
+              label='Buy'
+              max={maxOutputAmountEstimation}
+              amount={outputAssetAmount}
+              setAmount={onChangeOutputAmount}
+              asset={outputAsset}
+              maxButtonLabel='Max Amount:'
+              disabled={isConfirming}
+            />
+          ) : (
+            <>
+              <DirectionSelect
+                direction={orderDirection}
+                onChangeDirection={setOrderDirection}
+                asset={buyAsset}
+              />
+              <AssetAmountInput
+                max={maxInputAmount}
+                amount={inputAssetAmount}
+                setAmount={onChangeInputAmount}
+                asset={inputAsset}
+                maxButtonLabel='Balance:'
+                disabled={isConfirming}
+              />
+            </>
+          )}

+          {!isAdvanced && <Divider />}
+          <RangeInput
+            disabled={isConfirming || maxOutputAmountEstimation.isZero()}
+            onChange={handleRangeInputChange}
+            value={outputAssetAmount.shiftedBy(-outputAsset.decimals).toNumber()}
+            max={maxOutputAmountEstimation.shiftedBy(-outputAsset.decimals).toNumber()}
+            marginThreshold={
+              isMarginChecked
+                ? outputSideMarginThreshold.shiftedBy(-outputAsset.decimals).toNumber()
+                : undefined
+            }
+          />
+          <DepositCapMessage
+            action='buy'
+            coins={depositCapReachedCoins}
+            className='p-4 bg-white/5'
+          />
+
+          {borrowAsset && borrowAmount.isGreaterThanOrEqualTo(availableLiquidity) && (
+            <AvailableLiquidityMessage
+              availableLiquidity={borrowAsset?.liquidity?.amount ?? BN_ZERO}
+              asset={borrowAsset}
+            />
+          )}
+          {isAdvanced ? (
+            <AssetAmountInput
+              label='Sell'
+              max={maxInputAmount}
+              amount={inputAssetAmount}
+              setAmount={onChangeInputAmount}
+              asset={inputAsset}
+              maxButtonLabel='Balance:'
+              disabled={isConfirming}
+            />
+          ) : (
+            <>
+              <Divider />
+              <div className='flex justify-between w-full'>
+                <Text size='sm'>You receive</Text>
+                <Text size='sm'>
+                  {formatValue(outputAssetAmount.toNumber(), {
+                    decimals: outputAsset.decimals,
+                    abbreviated: false,
+                    suffix: ` ${outputAsset.symbol}`,
+                    minDecimals: 0,
+                    maxDecimals: outputAsset.decimals,
+                  })}
+                </Text>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      <div className='flex w-full px-3 pt-6'>
        <TradeSummary
-          buyAsset={buyAsset}
-          sellAsset={sellAsset}
+          sellAsset={inputAsset}
+          buyAsset={outputAsset}
          borrowRate={borrowAsset?.borrowRate}
          buyAction={handleBuyClick}
          buyButtonDisabled={isSwapDisabled}
@ -385,8 +451,10 @@ export default function SwapForm(props: Props) {
          estimatedFee={estimatedFee}
          route={route}
          liquidationPrice={liquidationPrice}
-          sellAmount={sellAssetAmount}
-          buyAmount={buyAssetAmount}
+          sellAmount={inputAssetAmount}
+          buyAmount={outputAssetAmount}
+          isAdvanced={isAdvanced}
+          direction={orderDirection}
        />
      </div>
    </>
--- a/src/components/Trade/TradeModule/index.tsx
+++ b/src/components/Trade/TradeModule/index.tsx
@ -1,26 +1,25 @@
 import classNames from 'classnames'

-import AssetSelector from 'components/Trade/TradeModule/AssetSelector'
 import SwapForm from 'components/Trade/TradeModule/SwapForm'

 interface Props {
  buyAsset: Asset
  sellAsset: Asset
+  isAdvanced: boolean
 }

 export default function TradeModule(props: Props) {
-  const { buyAsset, sellAsset } = props
-
+  const { buyAsset, sellAsset, isAdvanced } = props
  return (
    <div className='row-span-2'>
      <div
        className={classNames(
-          'relative isolate max-w-full overflow-hidden rounded-base pb-4 z-30',
+          'max-h-[calc(100dvh-98px)] h-[980px] min-h-[830px]',
+          'relative isolate max-w-full overflow-hidden rounded-base pb-4 z-30 flex flex-wrap flex-col justify-between',
          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
        )}
      >
-        <AssetSelector buyAsset={buyAsset} sellAsset={sellAsset} />
-        <SwapForm buyAsset={buyAsset} sellAsset={sellAsset} />
+        <SwapForm buyAsset={buyAsset} sellAsset={sellAsset} isAdvanced={isAdvanced} />
      </div>
    </div>
  )
--- a/src/constants/defaultSettings.ts
+++ b/src/constants/defaultSettings.ts
@ -7,7 +7,8 @@ export const DEFAULT_SETTINGS: Settings = {
  accountSummaryTabs: [true, true],
  reduceMotion: false,
  lendAssets: true,
-  tradingPair: { buy: enabledMarketAssets[0].denom, sell: enabledMarketAssets[1].denom },
+  tradingPairSimple: { buy: enabledMarketAssets[0].denom, sell: enabledMarketAssets[1].denom },
+  tradingPairAdvanced: { buy: enabledMarketAssets[0].denom, sell: enabledMarketAssets[1].denom },
  displayCurrency: ORACLE_DENOM,
  slippage: 0.02,
  tutorial: true,
--- a/src/constants/localStorageKeys.ts
+++ b/src/constants/localStorageKeys.ts
@ -1,5 +1,6 @@
 export enum LocalStorageKeys {
-  TRADING_PAIR = 'tradingPair',
+  TRADING_PAIR_SIMPLE = 'tradingPairSimple',
+  TRADING_PAIR_ADVANCED = 'tradingPairAdvanced',
  ACCOUNT_SUMMARY_TABS = 'accountSummaryTabs',
  DISPLAY_CURRENCY = 'displayCurrency',
  REDUCE_MOTION = 'reduceMotion',
--- a/src/pages/TradePage.tsx
+++ b/src/pages/TradePage.tsx
@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'

 import MigrationBanner from 'components/MigrationBanner'
 import AccountDetailsCard from 'components/Trade/AccountDetailsCard'
@ -10,30 +11,45 @@ import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
 import { byDenom } from 'utils/array'
 import { getEnabledMarketAssets } from 'utils/assets'
+import { getPage } from 'utils/route'

 export default function TradePage() {
-  const [tradingPair] = useLocalStorage<Settings['tradingPair']>(
-    LocalStorageKeys.TRADING_PAIR,
-    DEFAULT_SETTINGS.tradingPair,
+  const { pathname } = useLocation()
+  const page = getPage(pathname)
+  const isAdvanced = useMemo(() => page === 'trade-advanced', [page])
+
+  const [tradingPairAdvanced] = useLocalStorage<Settings['tradingPairAdvanced']>(
+    LocalStorageKeys.TRADING_PAIR_ADVANCED,
+    DEFAULT_SETTINGS.tradingPairAdvanced,
  )
+  const [tradingPairSimple] = useLocalStorage<Settings['tradingPairSimple']>(
+    LocalStorageKeys.TRADING_PAIR_SIMPLE,
+    DEFAULT_SETTINGS.tradingPairSimple,
+  )
+
  const enabledMarketAssets = getEnabledMarketAssets()
  const assetOverlayState = useStore((s) => s.assetOverlayState)

  const buyAsset = useMemo(
-    () => enabledMarketAssets.find(byDenom(tradingPair.buy)) ?? enabledMarketAssets[0],
-    [tradingPair, enabledMarketAssets],
+    () =>
+      enabledMarketAssets.find(
+        byDenom(isAdvanced ? tradingPairAdvanced.buy : tradingPairSimple.buy),
+      ) ?? enabledMarketAssets[0],
+    [tradingPairAdvanced, tradingPairSimple, enabledMarketAssets, isAdvanced],
  )
  const sellAsset = useMemo(
-    () => enabledMarketAssets.find(byDenom(tradingPair.sell)) ?? enabledMarketAssets[1],
-    [tradingPair, enabledMarketAssets],
+    () =>
+      enabledMarketAssets.find(
+        byDenom(isAdvanced ? tradingPairAdvanced.sell : tradingPairSimple.sell),
+      ) ?? enabledMarketAssets[1],
+    [tradingPairAdvanced, tradingPairSimple, enabledMarketAssets, isAdvanced],
  )
-
  return (
    <div className='flex flex-col w-full h-full gap-4'>
      <MigrationBanner />
-      <div className='grid h-full w-full grid-cols-[346px_auto] gap-4'>
-        <TradeModule buyAsset={buyAsset} sellAsset={sellAsset} />
+      <div className='grid w-full grid-cols-[auto_346px] gap-4'>
        <TradeChart buyAsset={buyAsset} sellAsset={sellAsset} />
+        <TradeModule buyAsset={buyAsset} sellAsset={sellAsset} isAdvanced={isAdvanced} />
        <AccountDetailsCard />
      </div>
      {assetOverlayState !== 'closed' && (
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@ -27,7 +27,12 @@ function PageContainer(props: Props) {

  if (!props.focusComponent)
    return (
-      <div className={classNames('mx-auto h-full w-full', !props.fullWidth && 'max-w-content')}>
+      <div
+        className={classNames(
+          'mx-auto flex items-start w-full',
+          !props.fullWidth && 'max-w-content',
+        )}
+      >
        {props.children}
      </div>
    )
--- a/src/types/interfaces/asset.d.ts
+++ b/src/types/interfaces/asset.d.ts
@ -69,6 +69,11 @@ interface Asset {
  isStaking?: boolean
 }

+interface AssetPair {
+  buy: Asset
+  sell: Asset
+}
+
 interface PseudoAsset {
  decimals: number
  symbol: string
--- a/src/types/interfaces/components/AssetOverlay.d.ts
+++ b/src/types/interfaces/components/AssetOverlay.d.ts
@ -1 +1 @@
-type OverlayState = 'buy' | 'sell' | 'closed'
+type OverlayState = 'buy' | 'sell' | 'pair' | 'closed'
--- a/src/types/interfaces/components/Navigation.d.ts
+++ b/src/types/interfaces/components/Navigation.d.ts
@ -2,4 +2,12 @@ interface MenuTreeEntry {
  pages: Page[]
  label: string
  externalUrl?: string
+  submenu?: MenuTreeSubmenuEntry[]
+}
+
+interface MenuTreeSubmenuEntry {
+  page: Page
+  label: string
+  subtitle?: string
+  icon?: React.ReactNode
 }
--- a/src/types/interfaces/components/Trade.d.ts
+++ b/src/types/interfaces/components/Trade.d.ts
@ -0,0 +1,4 @@
+interface TradingPair {
+  buy: string
+  sell: string
+}
--- a/src/types/interfaces/perps.d.ts
+++ b/src/types/interfaces/perps.d.ts
@ -1 +1 @@
-type OrderDirection = 'long' | 'short'
+type OrderDirection = 'long' | 'short' | 'buy' | 'sell'
--- a/src/types/interfaces/route.d.ts
+++ b/src/types/interfaces/route.d.ts
@ -1,5 +1,6 @@
 type Page =
  | 'trade'
+  | 'trade-advanced'
  | 'perps'
  | 'borrow'
  | 'farm'
--- a/src/types/interfaces/store/settings.d.ts
+++ b/src/types/interfaces/store/settings.d.ts
@ -2,7 +2,8 @@ interface Settings {
  accountSummaryTabs: boolean[]
  displayCurrency: string
  reduceMotion: boolean
-  tradingPair: { buy: string; sell: string }
+  tradingPairSimple: TradingPair
+  tradingPairAdvanced: TradingPair
  lendAssets: boolean
  slippage: number
  tutorial: boolean
--- a/src/utils/assets.ts
+++ b/src/utils/assets.ts
@ -1,4 +1,8 @@
 import { ASSETS } from 'constants/assets'
+import { BN_ZERO } from 'constants/math'
+import { BNCoin } from 'types/classes/BNCoin'
+import { byDenom } from 'utils/array'
+import { demagnify } from 'utils/formatters'

 export function getAssetByDenom(denom: string): Asset | undefined {
  return ASSETS.find((asset) => asset.denom === denom)
@ -47,3 +51,42 @@ export function getBorrowEnabledAssets() {
 export function getStakingAssets() {
  return ASSETS.filter((asset) => asset.isStaking)
 }
+
+function isAssetPair(assetPair: Asset | AssetPair): assetPair is AssetPair {
+  return (<AssetPair>assetPair).buy !== undefined
+}
+
+export function sortAssetsOrPairs(
+  assets: Asset[] | AssetPair[],
+  prices: BNCoin[],
+  marketDeposits: BNCoin[],
+  balances: BNCoin[],
+  baseDenom: string,
+): Asset[] | AssetPair[] {
+  if (prices.length === 0 || marketDeposits.length === 0) return assets
+
+  return assets.sort((a, b) => {
+    const assetA = isAssetPair(a) ? a.buy : a
+    const assetB = isAssetPair(b) ? b.buy : b
+
+    const aDenom = assetA.denom
+    const bDenom = assetB.denom
+    const aBalance = balances?.find(byDenom(aDenom))?.amount ?? BN_ZERO
+    const aPrice = prices?.find(byDenom(aDenom))?.amount ?? BN_ZERO
+    const bBalance = balances?.find(byDenom(bDenom))?.amount ?? BN_ZERO
+    const bPrice = prices?.find(byDenom(bDenom))?.amount ?? BN_ZERO
+
+    const aValue = demagnify(aBalance, assetA) * aPrice.toNumber()
+    const bValue = demagnify(bBalance, assetB) * bPrice.toNumber()
+    if (aValue > 0 || bValue > 0) return bValue - aValue
+    if (aDenom === baseDenom) return -1
+    if (bDenom === baseDenom) return 1
+
+    const aMarketDeposit = marketDeposits?.find(byDenom(aDenom))?.amount ?? BN_ZERO
+    const bMarketDeposit = marketDeposits?.find(byDenom(bDenom))?.amount ?? BN_ZERO
+    const aMarketValue = demagnify(aMarketDeposit, assetA) * aPrice.toNumber()
+    const bMarketValue = demagnify(bMarketDeposit, assetB) * bPrice.toNumber()
+
+    return bMarketValue - aMarketValue
+  })
+}
--- a/src/utils/health_computer/index.js
+++ b/src/utils/health_computer/index.js
@ -1,355 +1,390 @@
-let wasm;
+let wasm

-const heap = new Array(128).fill(undefined);
+const heap = new Array(128).fill(undefined)

-heap.push(undefined, null, true, false);
+heap.push(undefined, null, true, false)

-function getObject(idx) { return heap[idx]; }
+function getObject(idx) {
+  return heap[idx]
+}

-let heap_next = heap.length;
+let heap_next = heap.length

 function addHeapObject(obj) {
-    if (heap_next === heap.length) heap.push(heap.length + 1);
-    const idx = heap_next;
-    heap_next = heap[idx];
+  if (heap_next === heap.length) heap.push(heap.length + 1)
+  const idx = heap_next
+  heap_next = heap[idx]

-    heap[idx] = obj;
-    return idx;
+  heap[idx] = obj
+  return idx
 }

 function dropObject(idx) {
-    if (idx < 132) return;
-    heap[idx] = heap_next;
-    heap_next = idx;
+  if (idx < 132) return
+  heap[idx] = heap_next
+  heap_next = idx
 }

 function takeObject(idx) {
-    const ret = getObject(idx);
-    dropObject(idx);
-    return ret;
+  const ret = getObject(idx)
+  dropObject(idx)
+  return ret
 }

-let WASM_VECTOR_LEN = 0;
+let WASM_VECTOR_LEN = 0

-let cachedUint8Memory0 = null;
+let cachedUint8Memory0 = null

 function getUint8Memory0() {
-    if (cachedUint8Memory0 === null || cachedUint8Memory0.byteLength === 0) {
-        cachedUint8Memory0 = new Uint8Array(wasm.memory.buffer);
-    }
-    return cachedUint8Memory0;
+  if (cachedUint8Memory0 === null || cachedUint8Memory0.byteLength === 0) {
+    cachedUint8Memory0 = new Uint8Array(wasm.memory.buffer)
+  }
+  return cachedUint8Memory0
 }

-const cachedTextEncoder = (typeof TextEncoder !== 'undefined' ? new TextEncoder('utf-8') : { encode: () => { throw Error('TextEncoder not available') } } );
+const cachedTextEncoder =
+  typeof TextEncoder !== 'undefined'
+    ? new TextEncoder('utf-8')
+    : {
+        encode: () => {
+          throw Error('TextEncoder not available')
+        },
+      }

-const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
+const encodeString =
+  typeof cachedTextEncoder.encodeInto === 'function'
    ? function (arg, view) {
-    return cachedTextEncoder.encodeInto(arg, view);
-}
+        return cachedTextEncoder.encodeInto(arg, view)
+      }
    : function (arg, view) {
-    const buf = cachedTextEncoder.encode(arg);
-    view.set(buf);
-    return {
-        read: arg.length,
-        written: buf.length
-    };
-});
+        const buf = cachedTextEncoder.encode(arg)
+        view.set(buf)
+        return {
+          read: arg.length,
+          written: buf.length,
+        }
+      }

 function passStringToWasm0(arg, malloc, realloc) {
+  if (realloc === undefined) {
+    const buf = cachedTextEncoder.encode(arg)
+    const ptr = malloc(buf.length, 1) >>> 0
+    getUint8Memory0()
+      .subarray(ptr, ptr + buf.length)
+      .set(buf)
+    WASM_VECTOR_LEN = buf.length
+    return ptr
+  }

-    if (realloc === undefined) {
-        const buf = cachedTextEncoder.encode(arg);
-        const ptr = malloc(buf.length, 1) >>> 0;
-        getUint8Memory0().subarray(ptr, ptr + buf.length).set(buf);
-        WASM_VECTOR_LEN = buf.length;
-        return ptr;
+  let len = arg.length
+  let ptr = malloc(len, 1) >>> 0
+
+  const mem = getUint8Memory0()
+
+  let offset = 0
+
+  for (; offset < len; offset++) {
+    const code = arg.charCodeAt(offset)
+    if (code > 0x7f) break
+    mem[ptr + offset] = code
+  }
+
+  if (offset !== len) {
+    if (offset !== 0) {
+      arg = arg.slice(offset)
    }
+    ptr = realloc(ptr, len, (len = offset + arg.length * 3), 1) >>> 0
+    const view = getUint8Memory0().subarray(ptr + offset, ptr + len)
+    const ret = encodeString(arg, view)

-    let len = arg.length;
-    let ptr = malloc(len, 1) >>> 0;
+    offset += ret.written
+  }

-    const mem = getUint8Memory0();
-
-    let offset = 0;
-
-    for (; offset < len; offset++) {
-        const code = arg.charCodeAt(offset);
-        if (code > 0x7F) break;
-        mem[ptr + offset] = code;
-    }
-
-    if (offset !== len) {
-        if (offset !== 0) {
-            arg = arg.slice(offset);
-        }
-        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
-        const view = getUint8Memory0().subarray(ptr + offset, ptr + len);
-        const ret = encodeString(arg, view);
-
-        offset += ret.written;
-    }
-
-    WASM_VECTOR_LEN = offset;
-    return ptr;
+  WASM_VECTOR_LEN = offset
+  return ptr
 }

 function isLikeNone(x) {
-    return x === undefined || x === null;
+  return x === undefined || x === null
 }

-let cachedInt32Memory0 = null;
+let cachedInt32Memory0 = null

 function getInt32Memory0() {
-    if (cachedInt32Memory0 === null || cachedInt32Memory0.byteLength === 0) {
-        cachedInt32Memory0 = new Int32Array(wasm.memory.buffer);
-    }
-    return cachedInt32Memory0;
+  if (cachedInt32Memory0 === null || cachedInt32Memory0.byteLength === 0) {
+    cachedInt32Memory0 = new Int32Array(wasm.memory.buffer)
+  }
+  return cachedInt32Memory0
 }

-const cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );
+const cachedTextDecoder =
+  typeof TextDecoder !== 'undefined'
+    ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true })
+    : {
+        decode: () => {
+          throw Error('TextDecoder not available')
+        },
+      }

-if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); };
+if (typeof TextDecoder !== 'undefined') {
+  cachedTextDecoder.decode()
+}

 function getStringFromWasm0(ptr, len) {
-    ptr = ptr >>> 0;
-    return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
+  ptr = ptr >>> 0
+  return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len))
 }
 /**
-* @param {HealthComputer} c
-* @returns {HealthValuesResponse}
-*/
+ * @param {HealthComputer} c
+ * @returns {HealthValuesResponse}
+ */
 export function compute_health_js(c) {
-    const ret = wasm.compute_health_js(addHeapObject(c));
-    return takeObject(ret);
+  const ret = wasm.compute_health_js(addHeapObject(c))
+  return takeObject(ret)
 }

 /**
-* @param {HealthComputer} c
-* @param {string} withdraw_denom
-* @returns {string}
-*/
+ * @param {HealthComputer} c
+ * @param {string} withdraw_denom
+ * @returns {string}
+ */
 export function max_withdraw_estimate_js(c, withdraw_denom) {
-    let deferred2_0;
-    let deferred2_1;
-    try {
-        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        const ptr0 = passStringToWasm0(withdraw_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len0 = WASM_VECTOR_LEN;
-        wasm.max_withdraw_estimate_js(retptr, addHeapObject(c), ptr0, len0);
-        var r0 = getInt32Memory0()[retptr / 4 + 0];
-        var r1 = getInt32Memory0()[retptr / 4 + 1];
-        deferred2_0 = r0;
-        deferred2_1 = r1;
-        return getStringFromWasm0(r0, r1);
-    } finally {
-        wasm.__wbindgen_add_to_stack_pointer(16);
-        wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
-    }
+  let deferred2_0
+  let deferred2_1
+  try {
+    const retptr = wasm.__wbindgen_add_to_stack_pointer(-16)
+    const ptr0 = passStringToWasm0(withdraw_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc)
+    const len0 = WASM_VECTOR_LEN
+    wasm.max_withdraw_estimate_js(retptr, addHeapObject(c), ptr0, len0)
+    var r0 = getInt32Memory0()[retptr / 4 + 0]
+    var r1 = getInt32Memory0()[retptr / 4 + 1]
+    deferred2_0 = r0
+    deferred2_1 = r1
+    return getStringFromWasm0(r0, r1)
+  } finally {
+    wasm.__wbindgen_add_to_stack_pointer(16)
+    wasm.__wbindgen_free(deferred2_0, deferred2_1, 1)
+  }
 }

 /**
-* @param {HealthComputer} c
-* @param {string} borrow_denom
-* @param {BorrowTarget} target
-* @returns {string}
-*/
+ * @param {HealthComputer} c
+ * @param {string} borrow_denom
+ * @param {BorrowTarget} target
+ * @returns {string}
+ */
 export function max_borrow_estimate_js(c, borrow_denom, target) {
-    let deferred2_0;
-    let deferred2_1;
-    try {
-        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        const ptr0 = passStringToWasm0(borrow_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len0 = WASM_VECTOR_LEN;
-        wasm.max_borrow_estimate_js(retptr, addHeapObject(c), ptr0, len0, addHeapObject(target));
-        var r0 = getInt32Memory0()[retptr / 4 + 0];
-        var r1 = getInt32Memory0()[retptr / 4 + 1];
-        deferred2_0 = r0;
-        deferred2_1 = r1;
-        return getStringFromWasm0(r0, r1);
-    } finally {
-        wasm.__wbindgen_add_to_stack_pointer(16);
-        wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
-    }
+  let deferred2_0
+  let deferred2_1
+  try {
+    const retptr = wasm.__wbindgen_add_to_stack_pointer(-16)
+    const ptr0 = passStringToWasm0(borrow_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc)
+    const len0 = WASM_VECTOR_LEN
+    wasm.max_borrow_estimate_js(retptr, addHeapObject(c), ptr0, len0, addHeapObject(target))
+    var r0 = getInt32Memory0()[retptr / 4 + 0]
+    var r1 = getInt32Memory0()[retptr / 4 + 1]
+    deferred2_0 = r0
+    deferred2_1 = r1
+    return getStringFromWasm0(r0, r1)
+  } finally {
+    wasm.__wbindgen_add_to_stack_pointer(16)
+    wasm.__wbindgen_free(deferred2_0, deferred2_1, 1)
+  }
 }

 /**
-* @param {HealthComputer} c
-* @param {string} from_denom
-* @param {string} to_denom
-* @param {SwapKind} kind
-* @param {Slippage} slippage
-* @returns {string}
-*/
+ * @param {HealthComputer} c
+ * @param {string} from_denom
+ * @param {string} to_denom
+ * @param {SwapKind} kind
+ * @param {Slippage} slippage
+ * @returns {string}
+ */
 export function max_swap_estimate_js(c, from_denom, to_denom, kind, slippage) {
-    let deferred3_0;
-    let deferred3_1;
-    try {
-        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        const ptr0 = passStringToWasm0(from_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len0 = WASM_VECTOR_LEN;
-        const ptr1 = passStringToWasm0(to_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len1 = WASM_VECTOR_LEN;
-        wasm.max_swap_estimate_js(retptr, addHeapObject(c), ptr0, len0, ptr1, len1, addHeapObject(kind), addHeapObject(slippage));
-        var r0 = getInt32Memory0()[retptr / 4 + 0];
-        var r1 = getInt32Memory0()[retptr / 4 + 1];
-        deferred3_0 = r0;
-        deferred3_1 = r1;
-        return getStringFromWasm0(r0, r1);
-    } finally {
-        wasm.__wbindgen_add_to_stack_pointer(16);
-        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
-    }
+  let deferred3_0
+  let deferred3_1
+  try {
+    const retptr = wasm.__wbindgen_add_to_stack_pointer(-16)
+    const ptr0 = passStringToWasm0(from_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc)
+    const len0 = WASM_VECTOR_LEN
+    const ptr1 = passStringToWasm0(to_denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc)
+    const len1 = WASM_VECTOR_LEN
+    wasm.max_swap_estimate_js(
+      retptr,
+      addHeapObject(c),
+      ptr0,
+      len0,
+      ptr1,
+      len1,
+      addHeapObject(kind),
+      addHeapObject(slippage),
+    )
+    var r0 = getInt32Memory0()[retptr / 4 + 0]
+    var r1 = getInt32Memory0()[retptr / 4 + 1]
+    deferred3_0 = r0
+    deferred3_1 = r1
+    return getStringFromWasm0(r0, r1)
+  } finally {
+    wasm.__wbindgen_add_to_stack_pointer(16)
+    wasm.__wbindgen_free(deferred3_0, deferred3_1, 1)
+  }
 }

 /**
-* @param {HealthComputer} c
-* @param {string} denom
-* @param {LiquidationPriceKind} kind
-* @returns {string}
-*/
+ * @param {HealthComputer} c
+ * @param {string} denom
+ * @param {LiquidationPriceKind} kind
+ * @returns {string}
+ */
 export function liquidation_price_js(c, denom, kind) {
-    let deferred2_0;
-    let deferred2_1;
-    try {
-        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        const ptr0 = passStringToWasm0(denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len0 = WASM_VECTOR_LEN;
-        wasm.liquidation_price_js(retptr, addHeapObject(c), ptr0, len0, addHeapObject(kind));
-        var r0 = getInt32Memory0()[retptr / 4 + 0];
-        var r1 = getInt32Memory0()[retptr / 4 + 1];
-        deferred2_0 = r0;
-        deferred2_1 = r1;
-        return getStringFromWasm0(r0, r1);
-    } finally {
-        wasm.__wbindgen_add_to_stack_pointer(16);
-        wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
-    }
+  let deferred2_0
+  let deferred2_1
+  try {
+    const retptr = wasm.__wbindgen_add_to_stack_pointer(-16)
+    const ptr0 = passStringToWasm0(denom, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc)
+    const len0 = WASM_VECTOR_LEN
+    wasm.liquidation_price_js(retptr, addHeapObject(c), ptr0, len0, addHeapObject(kind))
+    var r0 = getInt32Memory0()[retptr / 4 + 0]
+    var r1 = getInt32Memory0()[retptr / 4 + 1]
+    deferred2_0 = r0
+    deferred2_1 = r1
+    return getStringFromWasm0(r0, r1)
+  } finally {
+    wasm.__wbindgen_add_to_stack_pointer(16)
+    wasm.__wbindgen_free(deferred2_0, deferred2_1, 1)
+  }
 }

 function handleError(f, args) {
-    try {
-        return f.apply(this, args);
-    } catch (e) {
-        wasm.__wbindgen_exn_store(addHeapObject(e));
-    }
+  try {
+    return f.apply(this, args)
+  } catch (e) {
+    wasm.__wbindgen_exn_store(addHeapObject(e))
+  }
 }

 async function __wbg_load(module, imports) {
-    if (typeof Response === 'function' && module instanceof Response) {
-        if (typeof WebAssembly.instantiateStreaming === 'function') {
-            try {
-                return await WebAssembly.instantiateStreaming(module, imports);
-
-            } catch (e) {
-                if (module.headers.get('Content-Type') != 'application/wasm') {
-                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
-
-                } else {
-                    throw e;
-                }
-            }
-        }
-
-        const bytes = await module.arrayBuffer();
-        return await WebAssembly.instantiate(bytes, imports);
-
-    } else {
-        const instance = await WebAssembly.instantiate(module, imports);
-
-        if (instance instanceof WebAssembly.Instance) {
-            return { instance, module };
-
+  if (typeof Response === 'function' && module instanceof Response) {
+    if (typeof WebAssembly.instantiateStreaming === 'function') {
+      try {
+        return await WebAssembly.instantiateStreaming(module, imports)
+      } catch (e) {
+        if (module.headers.get('Content-Type') != 'application/wasm') {
+          console.warn(
+            '`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n',
+            e,
+          )
        } else {
-            return instance;
+          throw e
        }
+      }
    }
+
+    const bytes = await module.arrayBuffer()
+    return await WebAssembly.instantiate(bytes, imports)
+  } else {
+    const instance = await WebAssembly.instantiate(module, imports)
+
+    if (instance instanceof WebAssembly.Instance) {
+      return { instance, module }
+    } else {
+      return instance
+    }
+  }
 }

 function __wbg_get_imports() {
-    const imports = {};
-    imports.wbg = {};
-    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
-        const ret = getObject(arg0);
-        return addHeapObject(ret);
-    };
-    imports.wbg.__wbindgen_is_undefined = function(arg0) {
-        const ret = getObject(arg0) === undefined;
-        return ret;
-    };
-    imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
-        takeObject(arg0);
-    };
-    imports.wbg.__wbindgen_string_get = function(arg0, arg1) {
-        const obj = getObject(arg1);
-        const ret = typeof(obj) === 'string' ? obj : undefined;
-        var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        var len1 = WASM_VECTOR_LEN;
-        getInt32Memory0()[arg0 / 4 + 1] = len1;
-        getInt32Memory0()[arg0 / 4 + 0] = ptr1;
-    };
-    imports.wbg.__wbg_parse_670c19d4e984792e = function() { return handleError(function (arg0, arg1) {
-        const ret = JSON.parse(getStringFromWasm0(arg0, arg1));
-        return addHeapObject(ret);
-    }, arguments) };
-    imports.wbg.__wbg_stringify_e25465938f3f611f = function() { return handleError(function (arg0) {
-        const ret = JSON.stringify(getObject(arg0));
-        return addHeapObject(ret);
-    }, arguments) };
-    imports.wbg.__wbindgen_throw = function(arg0, arg1) {
-        throw new Error(getStringFromWasm0(arg0, arg1));
-    };
+  const imports = {}
+  imports.wbg = {}
+  imports.wbg.__wbindgen_object_clone_ref = function (arg0) {
+    const ret = getObject(arg0)
+    return addHeapObject(ret)
+  }
+  imports.wbg.__wbindgen_is_undefined = function (arg0) {
+    const ret = getObject(arg0) === undefined
+    return ret
+  }
+  imports.wbg.__wbindgen_object_drop_ref = function (arg0) {
+    takeObject(arg0)
+  }
+  imports.wbg.__wbindgen_string_get = function (arg0, arg1) {
+    const obj = getObject(arg1)
+    const ret = typeof obj === 'string' ? obj : undefined
+    var ptr1 = isLikeNone(ret)
+      ? 0
+      : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc)
+    var len1 = WASM_VECTOR_LEN
+    getInt32Memory0()[arg0 / 4 + 1] = len1
+    getInt32Memory0()[arg0 / 4 + 0] = ptr1
+  }
+  imports.wbg.__wbg_parse_670c19d4e984792e = function () {
+    return handleError(function (arg0, arg1) {
+      const ret = JSON.parse(getStringFromWasm0(arg0, arg1))
+      return addHeapObject(ret)
+    }, arguments)
+  }
+  imports.wbg.__wbg_stringify_e25465938f3f611f = function () {
+    return handleError(function (arg0) {
+      const ret = JSON.stringify(getObject(arg0))
+      return addHeapObject(ret)
+    }, arguments)
+  }
+  imports.wbg.__wbindgen_throw = function (arg0, arg1) {
+    throw new Error(getStringFromWasm0(arg0, arg1))
+  }

-    return imports;
+  return imports
 }

-function __wbg_init_memory(imports, maybe_memory) {
-
-}
+function __wbg_init_memory(imports, maybe_memory) {}

 function __wbg_finalize_init(instance, module) {
-    wasm = instance.exports;
-    __wbg_init.__wbindgen_wasm_module = module;
-    cachedInt32Memory0 = null;
-    cachedUint8Memory0 = null;
+  wasm = instance.exports
+  __wbg_init.__wbindgen_wasm_module = module
+  cachedInt32Memory0 = null
+  cachedUint8Memory0 = null

-
-    return wasm;
+  return wasm
 }

 function initSync(module) {
-    if (wasm !== undefined) return wasm;
+  if (wasm !== undefined) return wasm

-    const imports = __wbg_get_imports();
+  const imports = __wbg_get_imports()

-    __wbg_init_memory(imports);
+  __wbg_init_memory(imports)

-    if (!(module instanceof WebAssembly.Module)) {
-        module = new WebAssembly.Module(module);
-    }
+  if (!(module instanceof WebAssembly.Module)) {
+    module = new WebAssembly.Module(module)
+  }

-    const instance = new WebAssembly.Instance(module, imports);
+  const instance = new WebAssembly.Instance(module, imports)

-    return __wbg_finalize_init(instance, module);
+  return __wbg_finalize_init(instance, module)
 }

 async function __wbg_init(input) {
-    if (wasm !== undefined) return wasm;
+  if (wasm !== undefined) return wasm

-    if (typeof input === 'undefined') {
-        input = new URL('index_bg.wasm', import.meta.url);
-    }
-    const imports = __wbg_get_imports();
+  if (typeof input === 'undefined') {
+    input = new URL('index_bg.wasm', import.meta.url)
+  }
+  const imports = __wbg_get_imports()

-    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
-        input = fetch(input);
-    }
+  if (
+    typeof input === 'string' ||
+    (typeof Request === 'function' && input instanceof Request) ||
+    (typeof URL === 'function' && input instanceof URL)
+  ) {
+    input = fetch(input)
+  }

-    __wbg_init_memory(imports);
+  __wbg_init_memory(imports)

-    const { instance, module } = await __wbg_load(await input, imports);
+  const { instance, module } = await __wbg_load(await input, imports)

-    return __wbg_finalize_init(instance, module);
+  return __wbg_finalize_init(instance, module)
 }

 export { initSync }
-export default __wbg_init;
+export default __wbg_init
--- a/src/utils/math.ts
+++ b/src/utils/math.ts
@ -1,4 +1,4 @@
-import { BN } from './helpers'
+import { BN } from 'utils/helpers'

 export const devideByPotentiallyZero = (numerator: number, denominator: number): number => {
  if (denominator === 0) return 0
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@ -29,6 +29,7 @@ export function getRoute(
 export function getPage(pathname: string): Page {
  const pages: Page[] = [
    'trade',
+    'trade-advanced',
    'perps',
    'borrow',
    'farm',
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -4,6 +4,8 @@ const plugin = require('tailwindcss/plugin')
 module.exports = {
  content: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
  safelist: [
+    'border-error',
+    'border-success',
    'h-2',
    'text-3xs',
    'text-3xs-caps',