Implement dynamic routes + price impact

tidy: refactor
fix: hide Perp Positions on Osmosis
2024-01-24 18:26:44 +01:00 · 2024-01-24 17:20:51 +01:00 · 2024-01-24 17:15:43 +01:00 · 2024-01-24 17:08:53 +01:00 · 2024-01-24 17:06:12 +01:00 · 2024-01-24 09:15:28 +01:00
442 changed files with 2842 additions and 2272 deletions
@@ -12,4 +12,5 @@ CHARTING_LIBRARY_USERNAME=git_username
 CHARTING_LIBRARY_ACCESS_TOKEN=access_token
 CHARTING_LIBRARY_REPOSITORY=github.com/tradingview/charting_library/

+NEXT_PUBLIC_PYTH_API=https://mars.rpc.p2p.world/api

@@ -23,7 +23,7 @@
    "@cosmjs/cosmwasm-stargate": "^0.32.2",
    "@delphi-labs/shuttle-react": "^3.10.0",
    "@keplr-wallet/cosmos": "^0.12.42",
-    "@sentry/nextjs": "^7.91.0",
+    "@sentry/nextjs": "^7.94.1",
    "@splinetool/react-spline": "^2.2.6",
    "@splinetool/runtime": "^0.9.521",
    "@tailwindcss/container-queries": "^0.1.1",
@@ -43,12 +43,12 @@
    "react-draggable": "^4.4.6",
    "react-helmet-async": "^2.0.3",
    "react-qr-code": "^2.0.12",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.21.3",
    "react-spring": "^9.7.3",
    "react-toastify": "^9.1.3",
    "react-use-clipboard": "^1.0.9",
    "recharts": "^2.10.1",
-    "sharp": "^0.33.1",
+    "sharp": "^0.33.2",
    "swr": "^2.2.4",
    "tailwind-scrollbar-hide": "^1.1.7",
    "zustand": "^4.4.7"
@@ -71,7 +71,7 @@
    "husky": "^8.0.3",
    "identity-obj-proxy": "^3.0.0",
    "lint-staged": "^15.2.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.4",
    "prettier-plugin-tailwindcss": "^0.5.6",
    "shelljs": "^0.8.5",
    "tailwindcss": "^3.3.3",
@@ -17,7 +17,7 @@ export default async function getHLSStakingAccounts(
    if (account.deposits.length === 0) return

    const strategy = hlsStrategies.find(
-      (strategy) => strategy.denoms.deposit === account.deposits.at(0).denom,
+      (strategy) => strategy.denoms.deposit === account.deposits[0].denom,
    )

    if (!strategy) return
@@ -1,10 +1,14 @@
 import { getPerpsQueryClient } from 'api/cosmwasm-client'
 import { BNCoin } from 'types/classes/BNCoin'

-export default async function getOpeningFee(chainConfig: ChainConfig, denom: string, size: string) {
+export default async function getOpeningFee(
+  chainConfig: ChainConfig,
+  denom: string,
+  amount: string,
+) {
  const perpsClient = await getPerpsQueryClient(chainConfig)

  return perpsClient
-    .openingFee({ denom, size: size as any })
+    .openingFee({ denom, size: amount as any })
    .then((resp) => BNCoin.fromCoin(resp.fee))
 }
@@ -1,18 +0,0 @@
-import fetchPythPriceData from 'api/prices/getPythPriceData'
-
-export default async function getPricesData(assets: Asset[]): Promise<string[]> {
-  try {
-    const assetsWithPythPriceFeedId = assets.filter((asset) => !!asset.pythPriceFeedId)
-    return await requestPythPriceData(assetsWithPythPriceFeedId)
-  } catch (ex) {
-    console.error(ex)
-    throw ex
-  }
-}
-
-async function requestPythPriceData(assets: Asset[]): Promise<string[]> {
-  if (!assets.length) return []
-
-  const priceFeedIds = assets.map((a) => a.pythPriceFeedId) as string[]
-  return await fetchPythPriceData(priceFeedIds)
-}
@@ -1,7 +1,7 @@
 import { cacheFn, pythPriceCache } from 'api/cache'
 import { pythEndpoints } from 'constants/pyth'

-export default async function fetchPythPriceData(priceFeedIds: string[]) {
+export default async function getPythPriceData(priceFeedIds: string[]) {
  try {
    const pricesUrl = new URL(`${pythEndpoints.api}/latest_vaas`)
    priceFeedIds.forEach((id) => pricesUrl.searchParams.append('ids[]', id))
@@ -14,6 +14,7 @@ export default async function fetchPythPriceData(priceFeedIds: string[]) {
    )
    return pythDataResponse
  } catch (ex) {
-    throw ex
+    console.log(ex)
+    return []
  }
 }
@@ -1,6 +1,7 @@
 import { aprsCache, aprsCacheResponse, cacheFn } from 'api/cache'

 export default async function getAprs(chainConfig: ChainConfig) {
+  if (!chainConfig.farm) return []
  try {
    const response = await cacheFn(
      () => fetch(chainConfig.endpoints.aprs.vaults),
@@ -1,22 +0,0 @@
-import Text from 'components/Text'
-export const ASSET_META = { accessorKey: 'symbol', header: 'Asset', id: 'symbol' }
-
-interface Props {
-  symbol: string
-  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
-}
-
-export const borderColor = (type: Props['type']): string =>
-  type === 'borrowing' ? 'border-loss' : 'border-profit'
-
-export default function Asset(props: Props) {
-  const { symbol, type } = props
-  return (
-    <Text size='xs'>
-      {symbol}
-      {type === 'borrowing' && <span className='ml-1 text-loss'>(debt)</span>}
-      {type === 'lending' && <span className='ml-1 text-profit'>(lent)</span>}
-      {type === 'vault' && <span className='ml-1 text-profit'>(farm)</span>}
-    </Text>
-  )
-}
@@ -1,70 +0,0 @@
-// @index(['./*.svg'], f => `export { default as ${f.name} } from 'components/Icons/${f.name}.svg'`)
-export { default as Account } from 'components/Icons/Account.svg'
-export { default as AccountArrowDown } from 'components/Icons/AccountArrowDown.svg'
-export { default as ArrowChartLineUp } from 'components/Icons/ArrowChartLineUp.svg'
-export { default as ArrowCircle } from 'components/Icons/ArrowCircle.svg'
-export { default as ArrowCircledTopRight } from 'components/Icons/ArrowCircledTopRight.svg'
-export { default as ArrowDownLine } from 'components/Icons/ArrowDownLine.svg'
-export { default as ArrowRight } from 'components/Icons/ArrowRight.svg'
-export { default as ArrowUpLine } from 'components/Icons/ArrowUpLine.svg'
-export { default as Chain } from 'components/Icons/Chain.svg'
-export { default as Check } from 'components/Icons/Check.svg'
-export { default as CheckCircled } from 'components/Icons/CheckCircled.svg'
-export { default as ChevronDown } from 'components/Icons/ChevronDown.svg'
-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'
-export { default as CrossCircled } from 'components/Icons/CrossCircled.svg'
-export { default as Edit } from 'components/Icons/Edit.svg'
-export { default as Enter } from 'components/Icons/Enter.svg'
-export { default as ExclamationMarkCircled } from 'components/Icons/ExclamationMarkCircled.svg'
-export { default as ExclamationMarkTriangle } from 'components/Icons/ExclamationMarkTriangle.svg'
-export { default as ExternalLink } from 'components/Icons/ExternalLink.svg'
-export { default as Flag } from 'components/Icons/Flag.svg'
-export { default as Gear } from 'components/Icons/Gear.svg'
-export { default as GridGlobe } from 'components/Icons/GridGlobe.svg'
-export { default as GridHole } from 'components/Icons/GridHole.svg'
-export { default as GridLandscape } from 'components/Icons/GridLandscape.svg'
-export { default as GridPlanet } from 'components/Icons/GridPlanet.svg'
-export { default as GridTire } from 'components/Icons/GridTire.svg'
-export { default as GridWeb } from 'components/Icons/GridWeb.svg'
-export { default as HandCoins } from 'components/Icons/HandCoins.svg'
-export { default as Heart } from 'components/Icons/Heart.svg'
-export { default as InfoCircle } from 'components/Icons/InfoCircle.svg'
-export { default as LockLocked } from 'components/Icons/LockLocked.svg'
-export { default as LockUnlocked } from 'components/Icons/LockUnlocked.svg'
-export { default as Logo } from 'components/Icons/Logo.svg'
-export { default as Luggage } from 'components/Icons/Luggage.svg'
-export { default as MarsProtocol } from 'components/Icons/MarsProtocol.svg'
-export { default as Neutron } from 'components/Icons/Neutron.svg'
-export { default as Osmo } from 'components/Icons/Osmo.svg'
-export { default as OverlayMark } from 'components/Icons/OverlayMark.svg'
-export { default as Plus } from 'components/Icons/Plus.svg'
-export { default as PlusCircled } from 'components/Icons/PlusCircled.svg'
-export { default as PlusSquared } from 'components/Icons/PlusSquared.svg'
-export { default as PythLogoType } from 'components/Icons/PythLogoType.svg'
-export { default as Questionmark } from 'components/Icons/Questionmark.svg'
-export { default as ReceiptCheck } from 'components/Icons/ReceiptCheck.svg'
-export { default as Scale } from 'components/Icons/Scale.svg'
-export { default as Search } from 'components/Icons/Search.svg'
-export { default as Shield } from 'components/Icons/Shield.svg'
-export { default as SortAsc } from 'components/Icons/SortAsc.svg'
-export { default as SortDesc } from 'components/Icons/SortDesc.svg'
-export { default as SortNone } from 'components/Icons/SortNone.svg'
-export { default as StarFilled } from 'components/Icons/StarFilled.svg'
-export { default as StarOutlined } from 'components/Icons/StarOutlined.svg'
-export { default as Subtract } from 'components/Icons/Subtract.svg'
-export { default as SwapIcon } from 'components/Icons/SwapIcon.svg'
-export { default as ThreeDots } from 'components/Icons/ThreeDots.svg'
-export { default as TooltipArrow } from 'components/Icons/TooltipArrow.svg'
-export { default as TrashBin } from 'components/Icons/TrashBin.svg'
-export { default as Twitter } from 'components/Icons/Twitter.svg'
-export { default as VerticalThreeLine } from 'components/Icons/VerticalThreeLine.svg'
-export { default as Wallet } from 'components/Icons/Wallet.svg'
-// @endindex
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'

-import { Enter, InfoCircle } from 'components/Icons'
+import { Enter, InfoCircle } from 'components/common/Icons'
 import useAlertDialog from 'hooks/useAlertDialog'

 interface Props {
@@ -1,10 +1,10 @@
 import { useCallback, useMemo } from 'react'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'

-import AssetBalanceRow from 'components/Asset/AssetBalanceRow'
-import { ArrowRight, ExclamationMarkCircled } from 'components/Icons'
+import AssetBalanceRow from 'components/common/assets/AssetBalanceRow'
+import { ArrowRight, ExclamationMarkCircled } from 'components/common/Icons'
 import AccountDeleteAlertDialog from 'components/Modals/Account/AccountDeleteAlertDialog'
-import Text from 'components/Text'
+import Text from 'components/common/Text'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
@@ -1,8 +1,8 @@
 import { useCallback, useMemo, useState } from 'react'

-import AssetSelectTable from 'components/Modals/AssetsSelect/AssetSelectTable'
-import SearchBar from 'components/SearchBar'
-import Text from 'components/Text'
+import AssetsSelect from 'components/Modals/AssetsSelect'
+import SearchBar from 'components/common/SearchBar'
+import Text from 'components/common/Text'
 import useMarketBorrowings from 'hooks/markets/useMarketBorrowings'
 import useStore from 'store'

@@ -89,11 +89,11 @@ export default function AddVaultAssetsModalContent(props: Props) {
            Leverage will be set at 50% for both assets by default
          </Text>
        </div>
-        <AssetSelectTable
-          isBorrow={true}
+        <AssetsSelect
          assets={poolAssets}
          onChangeSelected={onChangePoolDenoms}
          selectedDenoms={selectedPoolDenoms}
+          isBorrow
        />
        <div className='p-4'>
          <Text>Assets not in the liquidity pool</Text>
@@ -102,11 +102,11 @@ export default function AddVaultAssetsModalContent(props: Props) {
            these assets below.
          </Text>
        </div>
-        <AssetSelectTable
-          isBorrow={true}
+        <AssetsSelect
          assets={stableAssets}
          onChangeSelected={onChangeOtherDenoms}
          selectedDenoms={selectedOtherDenoms}
+          isBorrow
        />
      </div>
    </>
@@ -1,10 +1,10 @@
 import { useCallback, useState } from 'react'

-import Button from 'components/Button'
-import { CircularProgress } from 'components/CircularProgress'
-import Modal from 'components/Modal'
+import Button from 'components/common/Button'
+import { CircularProgress } from 'components/common/CircularProgress'
+import Modal from 'components/Modals/Modal'
 import AddVaultAssetsModalContent from 'components/Modals/AddVaultAssets/AddVaultBorrowAssetsModalContent'
-import Text from 'components/Text'
+import Text from 'components/common/Text'
 import useStore from 'store'

 export default function AddVaultBorrowAssetsModal() {
@@ -1,4 +1,4 @@
-import { Enter } from 'components/Icons'
+import { Enter } from 'components/common/Icons'

 export function NoIcon() {
  return (
@@ -1,10 +1,10 @@
 import classNames from 'classnames'

-import Button from 'components/Button'
-import Checkbox from 'components/Checkbox'
-import Modal from 'components/Modal'
+import Button from 'components/common/Button'
+import Checkbox from 'components/common/Checkbox'
+import Modal from 'components/Modals/Modal'
 import { NoIcon, YesIcon } from 'components/Modals/AlertDialog/ButtonIcons'
-import Text from 'components/Text'
+import Text from 'components/common/Text'
 import useAlertDialog from 'hooks/useAlertDialog'
 import useToggle from 'hooks/useToggle'

@@ -1,22 +1,23 @@
 import { useCallback, useState } from 'react'

-import CurrentAccountSummary from 'components/Account/CurrentAccountSummary'
-import AssetImage from 'components/Asset/AssetImage'
-import Button from 'components/Button'
-import Card from 'components/Card'
-import Divider from 'components/Divider'
-import { ArrowRight } from 'components/Icons'
-import Modal from 'components/Modal'
-import Text from 'components/Text'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import Modal from 'components/Modals/Modal'
+import CurrentAccountSummary from 'components/account/CurrentAccountSummary'
+import Button from 'components/common/Button'
+import Card from 'components/common/Card'
+import Divider from 'components/common/Divider'
+import { ArrowRight } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
+import AssetImage from 'components/common/assets/AssetImage'
 import { BN_ZERO } from 'constants/math'
+import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
 import { BN } from 'utils/helpers'

 interface Props {
  asset: Asset
  title: string
-  coinBalances: Coin[]
+  coinBalances: BNCoin[]
  actionButtonText: string
  contentHeader?: JSX.Element
  onClose: () => void
@@ -1,154 +0,0 @@
-import {
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  RowSelectionState,
-  SortingState,
-  useReactTable,
-} from '@tanstack/react-table'
-import classNames from 'classnames'
-import { useEffect, useMemo, useState } from 'react'
-
-import { SortAsc, SortDesc, SortNone } from 'components/Icons'
-import useAssetTableColumns from 'components/Modals/AssetsSelect/useAssetTableColumns'
-import Text from 'components/Text'
-import useMarketAssets from 'hooks/markets/useMarketAssets'
-import useStore from 'store'
-import { byDenom } from 'utils/array'
-
-interface Props {
-  assets: Asset[] | BorrowAsset[]
-  selectedDenoms: string[]
-  onChangeSelected: (denoms: string[]) => void
-  isBorrow: boolean
-}
-
-export default function AssetSelectTable(props: Props) {
-  const { data: markets } = useMarketAssets()
-  const defaultSelected = useMemo(() => {
-    const assets = props.assets as BorrowAsset[]
-    return assets.reduce(
-      (acc, asset, index) => {
-        if (props.selectedDenoms?.includes(asset.denom)) {
-          acc[index] = true
-        }
-        return acc
-      },
-      {} as { [key: number]: boolean },
-    )
-  }, [props.selectedDenoms, props.assets])
-  const [sorting, setSorting] = useState<SortingState>([{ id: 'symbol', desc: false }])
-  const [selected, setSelected] = useState<RowSelectionState>(defaultSelected)
-  const balances = useStore((s) => s.balances)
-  const columns = useAssetTableColumns(props.isBorrow)
-  const tableData: AssetTableRow[] = useMemo(() => {
-    return props.assets.map((asset) => {
-      const balancesForAsset = balances.find(byDenom(asset.denom))
-      return {
-        asset,
-        balance: balancesForAsset?.amount ?? '0',
-        market: markets.find((market) => market.denom === asset.denom),
-      }
-    })
-  }, [balances, props.assets, markets])
-
-  const table = useReactTable({
-    data: tableData,
-    columns,
-    state: {
-      sorting,
-      rowSelection: selected,
-    },
-    onRowSelectionChange: setSelected,
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  })
-
-  useEffect(() => {
-    const newSelectedDenoms = props.assets
-      .filter((_, index) => selected[index])
-      .map((asset) => asset.denom)
-
-    if (
-      props.selectedDenoms.length === newSelectedDenoms.length &&
-      newSelectedDenoms.every((denom) => props.selectedDenoms.includes(denom))
-    )
-      return
-    props.onChangeSelected(newSelectedDenoms)
-  }, [selected, props])
-
-  return (
-    <table className='w-full'>
-      <thead className='border-b border-white/10'>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id}>
-            {headerGroup.headers.map((header) => {
-              return (
-                <th
-                  key={header.id}
-                  onClick={header.column.getToggleSortingHandler()}
-                  className={classNames(
-                    'p-2',
-                    header.column.getCanSort() && 'hover:cursor-pointer',
-                    header.id === 'symbol' ? 'text-left' : 'text-right',
-                  )}
-                >
-                  <div
-                    className={classNames(
-                      'flex',
-                      header.id === 'symbol' ? 'justify-start' : 'justify-end',
-                      'align-center',
-                    )}
-                  >
-                    <span className='w-6 h-6 text-white'>
-                      {header.column.getCanSort()
-                        ? {
-                            asc: <SortAsc />,
-                            desc: <SortDesc />,
-                            false: <SortNone />,
-                          }[header.column.getIsSorted() as string] ?? null
-                        : null}
-                    </span>
-                    <Text
-                      tag='span'
-                      size='sm'
-                      className='flex items-center font-normal text-white/40'
-                    >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
-                    </Text>
-                  </div>
-                </th>
-              )
-            })}
-          </tr>
-        ))}
-      </thead>
-      <tbody>
-        {table.getRowModel().rows.map((row) => {
-          return (
-            <tr
-              key={row.id}
-              className='hover:cursor-pointer text-white/60'
-              onClick={() => row.toggleSelected()}
-            >
-              {row.getVisibleCells().map((cell) => {
-                return (
-                  <td
-                    key={cell.id}
-                    className={classNames(
-                      cell.column.id === 'select' ? `` : 'text-right',
-                      'px-4 py-3',
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                )
-              })}
-            </tr>
-          )
-        })}
-      </tbody>
-    </table>
-  )
-}
@@ -0,0 +1,55 @@
+import { Row } from '@tanstack/react-table'
+
+import Checkbox from 'components/common/Checkbox'
+import Text from 'components/common/Text'
+import AssetImage from 'components/common/assets/AssetImage'
+import AssetRate from 'components/common/assets/AssetRate'
+
+export const ASSET_META = { id: 'name', header: 'Asset', accessorKey: 'asset.symbol' }
+
+interface Props {
+  row: Row<AssetTableRow>
+}
+
+function isBorrowAsset(object?: any): object is BorrowAsset {
+  if (!object) return false
+  return 'borrowRate' in object
+}
+
+export default function Asset(props: Props) {
+  const { row } = props
+  const asset = row.original.asset
+  const market = row.original.market
+  const isBorrow = isBorrowAsset(asset)
+  const showRate = !isBorrow && market?.borrowEnabled
+  const apy = isBorrow ? market?.apy.borrow : market?.apy.deposit
+
+  return (
+    <div className='flex items-center'>
+      <Checkbox
+        name={`asset-${asset.id.toLowerCase()}`}
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+        noMouseEvents
+      />
+      <AssetImage asset={asset} size={24} className='ml-4' />
+      <div className='ml-2 text-left'>
+        <Text size='sm' className='mb-0.5 text-white'>
+          {asset.symbol}
+        </Text>
+        {showRate && market ? (
+          <AssetRate
+            rate={apy ?? 0}
+            isEnabled={market.borrowEnabled}
+            className='text-xs'
+            type='apy'
+            orientation='rtl'
+            suffix
+          />
+        ) : (
+          <Text size='xs'>{asset.name}</Text>
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,38 @@
+import { Row } from '@tanstack/react-table'
+
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { BN_ZERO } from 'constants/math'
+import { BNCoin } from 'types/classes/BNCoin'
+import { demagnify } from 'utils/formatters'
+import { BN } from 'utils/helpers'
+
+export const BALANCE_META = { id: 'value', header: 'Balance', accessorKey: 'value' }
+
+interface Props {
+  row: Row<AssetTableRow>
+}
+
+export const valueSortingFn = (a: Row<AssetTableRow>, b: Row<AssetTableRow>): number => {
+  const valueA = a.original.value ?? BN_ZERO
+  const valueB = b.original.value ?? BN_ZERO
+  return valueA.minus(valueB).toNumber()
+}
+
+export default function Balance(props: Props) {
+  const { row } = props
+  const asset = row.original.asset
+  const balance = BN(row.original.balance ?? '0')
+  const coin = BNCoin.fromDenomAndBigNumber(asset.denom, balance)
+
+  return (
+    <div className='flex flex-wrap items-center'>
+      <DisplayCurrency coin={coin} className='mb-0.5 w-full text-white' />
+      <FormattedNumber
+        className='w-full text-xs'
+        options={{ minDecimals: 2, maxDecimals: asset.decimals }}
+        amount={demagnify(balance, asset)}
+      />
+    </div>
+  )
+}
@@ -0,0 +1,25 @@
+import { Row } from '@tanstack/react-table'
+
+import Text from 'components/common/Text'
+import { formatPercent } from 'utils/formatters'
+
+export const BORROW_RATE_META = {
+  id: 'asset.borrowRate',
+  header: 'BorrowRate',
+  accessorKey: 'asset.borrowRate',
+}
+
+interface Props {
+  row: Row<AssetTableRow>
+}
+
+export default function BorrowRate(props: Props) {
+  const { row } = props
+  const asset = row.original.asset as BorrowAsset
+
+  return (
+    <Text size='sm' className='mb-0.5 text-white'>
+      {formatPercent(asset.borrowRate ?? 0)}
+    </Text>
+  )
+}
@@ -0,0 +1,30 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import Asset, { ASSET_META } from 'components/Modals/AssetsSelect/Columns/Asset'
+import Balance, {
+  BALANCE_META,
+  valueSortingFn,
+} from 'components/Modals/AssetsSelect/Columns/Balance'
+import BorrowRate, { BORROW_RATE_META } from 'components/Modals/AssetsSelect/Columns/BorrowRate'
+
+export default function useAssetSelectColumns(isBorrow?: boolean) {
+  return useMemo<ColumnDef<AssetTableRow>[]>(() => {
+    return [
+      {
+        ...ASSET_META,
+        cell: ({ row }) => <Asset row={row} />,
+      },
+      isBorrow
+        ? {
+            ...BORROW_RATE_META,
+            cell: ({ row }) => <BorrowRate row={row} />,
+          }
+        : {
+            ...BALANCE_META,
+            cell: ({ row }) => <Balance row={row} />,
+            sortingFn: valueSortingFn,
+          },
+    ]
+  }, [isBorrow])
+}
@@ -0,0 +1,81 @@
+import { RowSelectionState } from '@tanstack/react-table'
+import { useEffect, useMemo, useState } from 'react'
+
+import useAssetSelectColumns from 'components/Modals/AssetsSelect/Columns/useAssetSelectColumns'
+import Table from 'components/common/Table'
+import useGetCoinValue from 'hooks/assets/useGetCoinValue'
+import useMarketAssets from 'hooks/markets/useMarketAssets'
+import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
+import { byDenom } from 'utils/array'
+import { BN } from 'utils/helpers'
+
+interface Props {
+  assets: Asset[]
+  onChangeSelected: (selected: string[]) => void
+  selectedDenoms: string[]
+  isBorrow?: boolean
+}
+
+export default function AssetsSelect(props: Props) {
+  const { assets, onChangeSelected, selectedDenoms, isBorrow } = props
+  const columns = useAssetSelectColumns(isBorrow)
+  const { data: markets } = useMarketAssets()
+  const getCoinValue = useGetCoinValue()
+
+  const defaultSelected = useMemo(() => {
+    const selectableAssets = assets
+    return selectableAssets.reduce(
+      (acc, asset, index) => {
+        if (selectedDenoms?.includes(asset.denom)) {
+          acc[index] = true
+        }
+        return acc
+      },
+      {} as { [key: number]: boolean },
+    )
+  }, [selectedDenoms, assets])
+
+  const [selected, setSelected] = useState<RowSelectionState>(defaultSelected)
+
+  const balances = useStore((s) => s.balances)
+  const tableData: AssetTableRow[] = useMemo(() => {
+    return assets.map((asset) => {
+      const balancesForAsset = balances.find(byDenom(asset.denom))
+      const coin = BNCoin.fromDenomAndBigNumber(asset.denom, BN(balancesForAsset?.amount ?? '0'))
+      const value = getCoinValue(coin)
+      return {
+        asset,
+        balance: balancesForAsset?.amount ?? '0',
+        value,
+        market: markets.find((market) => market.denom === asset.denom),
+      }
+    })
+  }, [balances, assets, markets, getCoinValue])
+
+  useEffect(() => {
+    const selectedAssets = assets.filter((_, index) => selected[index])
+
+    const newSelectedDenoms = selectedAssets
+      .sort((a, b) => a.symbol.localeCompare(b.symbol))
+      .map((asset) => asset.denom)
+    if (
+      selectedDenoms.length === newSelectedDenoms.length &&
+      newSelectedDenoms.every((denom) => selectedDenoms.includes(denom))
+    )
+      return
+    onChangeSelected(newSelectedDenoms)
+  }, [selected, props, assets, selectedDenoms, onChangeSelected])
+
+  return (
+    <Table
+      title='Assets'
+      hideCard={true}
+      columns={columns}
+      data={tableData}
+      initialSorting={[{ id: isBorrow ? 'asset.borrowRate' : 'value', desc: !isBorrow }]}
+      setRowSelection={setSelected}
+      selectedRows={selected}
+    />
+  )
+}
@@ -1,94 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table'
-import React from 'react'
-
-import AssetImage from 'components/Asset/AssetImage'
-import AssetRate from 'components/Asset/AssetRate'
-import Checkbox from 'components/Checkbox'
-import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
-import Text from 'components/Text'
-import { BNCoin } from 'types/classes/BNCoin'
-import { demagnify, formatPercent } from 'utils/formatters'
-
-function showBorrowRate(data: AssetTableRow[]) {
-  const assetData = data.length && (data[0].asset as BorrowAsset)
-  return !!(assetData && assetData?.borrowRate)
-}
-
-export default function useAssetTableColumns(isBorrow: boolean) {
-  return React.useMemo<ColumnDef<AssetTableRow>[]>(
-    () => [
-      {
-        header: 'Asset',
-        accessorKey: 'symbol',
-        id: 'symbol',
-        cell: ({ row }) => {
-          const market = row.original.market
-          const borrowAsset = row.original.asset as BorrowAsset
-          const showRate = !borrowAsset?.borrowRate
-          const apy = isBorrow ? market?.apy.borrow : market?.apy.deposit
-
-          return (
-            <div className='flex items-center'>
-              <Checkbox
-                name={`asset-${borrowAsset.id.toLowerCase()}`}
-                checked={row.getIsSelected()}
-                onChange={row.getToggleSelectedHandler()}
-                noMouseEvents
-              />
-              <AssetImage asset={borrowAsset} size={24} className='ml-4' />
-              <div className='ml-2 text-left'>
-                <Text size='sm' className='mb-0.5 text-white'>
-                  {borrowAsset.symbol}
-                </Text>
-                {showRate && market ? (
-                  <AssetRate
-                    rate={apy ?? 0}
-                    isEnabled={market.borrowEnabled}
-                    className='text-xs'
-                    type='apy'
-                    orientation='rtl'
-                    suffix
-                  />
-                ) : (
-                  <Text size='xs'>{borrowAsset.name}</Text>
-                )}
-              </div>
-            </div>
-          )
-        },
-      },
-      {
-        id: 'details',
-        header: (data) => {
-          const tableData = data.table.options.data as AssetTableRow[]
-          if (showBorrowRate(tableData)) return 'Borrow Rate'
-          return 'Balance'
-        },
-        cell: ({ row }) => {
-          const asset = row.original.asset as BorrowAsset
-          const balance = row.original.balance
-          if (asset?.borrowRate)
-            return (
-              <Text size='sm' className='mb-0.5 text-white'>
-                {formatPercent(asset.borrowRate ?? 0)}
-              </Text>
-            )
-          if (!balance) return null
-          const coin = new BNCoin({ denom: row.original.asset.denom, amount: balance })
-          return (
-            <div className='flex flex-wrap items-center'>
-              <DisplayCurrency coin={coin} className='mb-0.5 w-full text-white' />
-              <FormattedNumber
-                className='w-full text-xs'
-                options={{ minDecimals: 2, maxDecimals: asset.decimals }}
-                amount={demagnify(balance, asset)}
-              />
-            </div>
-          )
-        },
-      },
-    ],
-    [isBorrow],
-  )
-}
@@ -1,23 +1,23 @@
 import BigNumber from 'bignumber.js'
 import { useCallback, useEffect, useMemo, useState } from 'react'

-import AccountSummary from 'components/Account/AccountSummary'
-import AssetImage from 'components/Asset/AssetImage'
-import Button from 'components/Button'
-import Card from 'components/Card'
-import DisplayCurrency from 'components/DisplayCurrency'
-import Divider from 'components/Divider'
-import { FormattedNumber } from 'components/FormattedNumber'
-import { ArrowRight, InfoCircle } from 'components/Icons'
-import Modal from 'components/Modal'
-import Switch from 'components/Switch'
-import Text from 'components/Text'
-import TitleAndSubCell from 'components/TitleAndSubCell'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import AccountSummary from 'components/account/AccountSummary'
+import AssetImage from 'components/common/assets/AssetImage'
+import Button from 'components/common/Button'
+import Card from 'components/common/Card'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import Divider from 'components/common/Divider'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { ArrowRight, InfoCircle } from 'components/common/Icons'
+import Switch from 'components/common/Switch'
+import Text from 'components/common/Text'
+import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
+import Modal from 'components/Modals/Modal'
 import { BN_ZERO } from 'constants/math'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 import useAutoLend from 'hooks/useAutoLend'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useToggle from 'hooks/useToggle'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
@@ -1,4 +1,4 @@
-import AccountFundContent from 'components/Account/AccountFund/AccountFundContent'
+import AccountFundContent from 'components/account/AccountFund/AccountFundContent'
 import useStore from 'store'

 interface Props {
@@ -1,12 +1,12 @@
 import BigNumber from 'bignumber.js'
 import { useEffect, useState } from 'react'

-import Button from 'components/Button'
-import Divider from 'components/Divider'
-import { ArrowRight } from 'components/Icons'
-import Switch from 'components/Switch'
-import Text from 'components/Text'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import Button from 'components/common/Button'
+import Divider from 'components/common/Divider'
+import { ArrowRight } from 'components/common/Icons'
+import Switch from 'components/common/Switch'
+import Text from 'components/common/Text'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
@@ -1,6 +1,6 @@
 import FundWithdrawModalContent from 'components/Modals/FundWithdraw/FundAndWithdrawModalContent'
 import ModalContentWithSummary from 'components/Modals/ModalContentWithSummary'
-import Text from 'components/Text'
+import Text from 'components/common/Text'
 import useAccount from 'hooks/accounts/useAccount'
 import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'
@@ -1,8 +1,8 @@
 import { useCallback } from 'react'

-import { ChevronRight, Compass, HandCoins, Luggage } from 'components/Icons'
-import Modal from 'components/Modal'
-import Text from 'components/Text'
+import { ChevronRight, Compass, HandCoins, Luggage } from 'components/common/Icons'
+import Modal from 'components/Modals/Modal'
+import Text from 'components/common/Text'
 import useStore from 'store'
 import { DocURL } from 'types/enums/docURL'

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { mutate } from 'swr'

-import Button from 'components/Button'
-import DocsLink from 'components/DocsLink'
-import { ArrowRight } from 'components/Icons'
-import Text from 'components/Text'
+import Button from 'components/common/Button'
+import DocsLink from 'components/common/DocsLink'
+import { ArrowRight } from 'components/common/Icons'
+import Text from 'components/common/Text'
 import useStore from 'store'

 export default function CreateAccount() {
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react'

-import Button from 'components/Button'
-import { ArrowRight } from 'components/Icons'
+import Button from 'components/common/Button'
+import { ArrowRight } from 'components/common/Icons'
 import LeverageSummary from 'components/Modals/HLS/Deposit/LeverageSummary'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { getLeveragedApy } from 'utils/math'

 interface Props {
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'

-import SummaryItems from 'components/SummaryItems'
+import SummaryItems from 'components/common/SummaryItems'
 import useBorrowAsset from 'hooks/useBorrowAsset'

 interface Props {
@@ -1,8 +1,8 @@
 import React from 'react'

-import Button from 'components/Button'
-import { ArrowRight } from 'components/Icons'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import Button from 'components/common/Button'
+import { ArrowRight } from 'components/common/Icons'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'

 interface Props {
  amount: BigNumber
@@ -1,9 +1,9 @@
 import classNames from 'classnames'
 import React from 'react'

-import Button from 'components/Button'
-import { ArrowRight } from 'components/Icons'
-import Radio from 'components/Radio'
+import Button from 'components/common/Button'
+import { ArrowRight } from 'components/common/Icons'
+import Radio from 'components/common/Radio'

 interface Props {
  hlsAccounts: Account[]
@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'

-import DisplayCurrency from 'components/DisplayCurrency'
-import { ExclamationMarkTriangle } from 'components/Icons'
-import Text from 'components/Text'
-import WarningMessages from 'components/WarningMessages'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { ExclamationMarkTriangle } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import WarningMessages from 'components/common/WarningMessages'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import { BNCoin } from 'types/classes/BNCoin'
 import { formatAmountWithSymbol, formatLeverage } from 'utils/formatters'
@@ -1,7 +1,7 @@
 import React from 'react'

-import { FormattedNumber } from 'components/FormattedNumber'
-import Text from 'components/Text'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import Text from 'components/common/Text'

 interface Props {
  items: { title: string; amount: number }[]
@@ -1,10 +1,10 @@
 import React from 'react'

-import AmountAndValue from 'components/AmountAndValue'
-import AssetImage from 'components/Asset/AssetImage'
-import { FormattedNumber } from 'components/FormattedNumber'
+import AmountAndValue from 'components/common/AmountAndValue'
+import AssetImage from 'components/common/assets/AssetImage'
+import { FormattedNumber } from 'components/common/FormattedNumber'
 import Container from 'components/Modals/HLS/Deposit/Summary/Container'
-import Text from 'components/Text'
+import Text from 'components/common/Text'

 interface Props {
  amount: BigNumber
@@ -1,6 +1,6 @@
 import React from 'react'

-import Text from 'components/Text'
+import Text from 'components/common/Text'

 interface Props {
  children: React.ReactNode
@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react'

-import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
-import { InfoCircle } from 'components/Icons'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { InfoCircle } from 'components/common/Icons'
 import AprBreakdown from 'components/Modals/HLS/Deposit/Summary/ApyBreakdown'
 import Container from 'components/Modals/HLS/Deposit/Summary/Container'
-import Text from 'components/Text'
-import { Tooltip } from 'components/Tooltip'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
 import { BNCoin } from 'types/classes/BNCoin'

 interface Props {
@@ -1,7 +1,7 @@
 import React from 'react'

-import Button from 'components/Button'
-import { ArrowRight } from 'components/Icons'
+import Button from 'components/common/Button'
+import { ArrowRight } from 'components/common/Icons'
 import AssetSummary from 'components/Modals/HLS/Deposit/Summary/AssetSummary'
 import YourPosition from 'components/Modals/HLS/Deposit/Summary/YourPosition'
 import useBorrowAsset from 'hooks/useBorrowAsset'
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react'

-import Accordion from 'components/Accordion'
+import Accordion from 'components/common/Accordion'
 import useStakingController from 'components/Modals/HLS/Deposit//useStakingController'
 import useVaultController from 'components/Modals/HLS/Deposit//useVaultController'
 import useAccordionItems from 'components/Modals/HLS/Deposit/useAccordionItems'
@@ -1,8 +1,8 @@
 import React from 'react'

-import DoubleLogo from 'components/DoubleLogo'
-import HLSTag from 'components/HLS/HLSTag'
-import Text from 'components/Text'
+import DoubleLogo from 'components/common/DoubleLogo'
+import HLSTag from 'components/hls/HLSTag'
+import Text from 'components/common/Text'

 interface Props {
  primaryAsset: Asset
@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react'

-import Button from 'components/Button'
+import Button from 'components/common/Button'
 import LeverageSummary from 'components/Modals/HLS/Deposit/LeverageSummary'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
@@ -1,15 +1,15 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useMemo } from 'react'

-import Button from 'components/Button'
-import Divider from 'components/Divider'
-import SummaryItems from 'components/SummaryItems'
-import Switch from 'components/Switch'
-import Text from 'components/Text'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import Button from 'components/common/Button'
+import Divider from 'components/common/Divider'
+import SummaryItems from 'components/common/SummaryItems'
+import Switch from 'components/common/Switch'
+import Text from 'components/common/Text'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
 import useAllAssets from 'hooks/assets/useAllAssets'
-import useDepositActions from 'hooks/HLS/useDepositActions'
+import useDepositActions from 'hooks/hls/useDepositActions'
 import useBorrowAsset from 'hooks/useBorrowAsset'
 import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
 import useHealthComputer from 'hooks/useHealthComputer'
@@ -1,9 +1,9 @@
 import BigNumber from 'bignumber.js'
 import { useCallback, useMemo } from 'react'

-import Button from 'components/Button'
-import SummaryItems from 'components/SummaryItems'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import Button from 'components/common/Button'
+import SummaryItems from 'components/common/SummaryItems'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
 import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
@@ -28,7 +28,7 @@ export default function Repay(props: Props) {
  const repay = useStore((s) => s.repay)

  const currentDebt: BigNumber = useMemo(
-    () => props.account.debts.find(byDenom(props.borrowAsset.denom)).amount || BN_ZERO,
+    () => props.account.debts.find(byDenom(props.borrowAsset.denom))?.amount || BN_ZERO,
    [props.account.debts, props.borrowAsset.denom],
  )

@@ -1,7 +1,7 @@
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'

-import Button from 'components/Button'
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import Button from 'components/common/Button'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useHealthComputer from 'hooks/useHealthComputer'
@@ -42,6 +42,7 @@ export default function Withdraw(props: Props) {

  const onClick = useCallback(() => {
    useStore.setState({ hlsManageModal: null })
+    if (!removedDeposit) return
    withdraw({
      accountId: props.account.id,
      coins: [{ coin: removedDeposit }],
@@ -1,6 +1,6 @@
 import React from 'react'

-import Modal from 'components/Modal'
+import Modal from 'components/Modals/Modal'
 import Content from 'components/Modals/HLS/Deposit'
 import Header from 'components/Modals/HLS/Header'
 import useAsset from 'hooks/assets/useAsset'
@@ -1,6 +1,6 @@
-import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
-import TitleAndSubCell from 'components/TitleAndSubCell'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import TitleAndSubCell from 'components/common/TitleAndSubCell'
 import useAssetIncentivesApy from 'hooks/useAssetIncentiveApy'
 import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
 import { BNCoin } from 'types/classes/BNCoin'
@@ -15,7 +15,7 @@ function DetailsHeader({ data }: Props) {
  const balanceInWallet = useCurrentWalletBalance(asset.denom)

  return (
-    <div className='flex gap-6 border-b border-white/5 px-6 py-4 gradient-header'>
+    <div className='flex gap-6 px-6 py-4 border-b border-white/5 gradient-header'>
      {assetApy && (
        <>
          <TitleAndSubCell
@@ -40,7 +40,7 @@ function DetailsHeader({ data }: Props) {
          <TitleAndSubCell
            title={
              <DisplayCurrency
-                coin={new BNCoin({ denom: asset.denom, amount: accountLentAmount })}
+                coin={new BNCoin({ denom: asset.denom, amount: accountLentAmount.toString() })}
              />
            }
            sub={'Deposited'}
@@ -2,7 +2,7 @@ import { useCallback } from 'react'

 import AssetAmountSelectActionModal from 'components/Modals/AssetAmountSelectActionModal'
 import DetailsHeader from 'components/Modals/LendAndReclaim/DetailsHeader'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
 import useStore from 'store'
@@ -1,8 +1,8 @@
 import classNames from 'classnames'
 import { ReactNode, useEffect, useRef } from 'react'

-import EscButton from 'components/Button/EscButton'
-import Card from 'components/Card'
+import EscButton from 'components/common/Button/EscButton'
+import Card from 'components/common/Card'

 export interface ModalProps {
  header: string | ReactNode
@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'

-import AccountSummary from 'components/Account/AccountSummary'
-import Card from 'components/Card'
-import { CircularProgress } from 'components/CircularProgress'
-import Modal, { ModalProps } from 'components/Modal'
+import AccountSummary from 'components/account/AccountSummary'
+import Card from 'components/common/Card'
+import { CircularProgress } from 'components/common/CircularProgress'
+import Modal, { ModalProps } from 'components/Modals/Modal'
 import useStore from 'store'

 interface Props extends ModalProps {
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { ReactNode } from 'react'

-import Text from 'components/Text'
+import Text from 'components/common/Text'

 interface Props {
  label: string
@@ -1,7 +1,7 @@
 import classNames from 'classnames'

-import Switch from 'components/Switch'
-import Text from 'components/Text'
+import Switch from 'components/common/Switch'
+import Text from 'components/common/Text'

 interface Props {
  onChange: (value: boolean) => void
@@ -1,16 +1,16 @@
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'

-import AssetImage from 'components/Asset/AssetImage'
-import Button from 'components/Button'
-import { ArrowCircle, Enter } from 'components/Icons'
-import Modal from 'components/Modal'
+import Modal from 'components/Modals/Modal'
 import SettingsOptions from 'components/Modals/Settings/SettingsOptions'
 import SettingsSwitch from 'components/Modals/Settings/SettingsSwitch'
-import NumberInput from 'components/NumberInput'
-import Select from 'components/Select'
-import Text from 'components/Text'
-import { TextLink } from 'components/TextLink'
+import Button from 'components/common/Button'
+import { ArrowCircle, Enter } from 'components/common/Icons'
+import NumberInput from 'components/common/NumberInput'
+import Select from 'components/common/Select'
+import Text from 'components/common/Text'
+import { TextLink } from 'components/common/TextLink'
+import AssetImage from 'components/common/assets/AssetImage'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
@@ -48,6 +48,10 @@ export default function SettingsModal() {
    LocalStorageKeys.SLIPPAGE,
    DEFAULT_SETTINGS.slippage,
  )
+  const [updateOracle, setUpdateOracle] = useLocalStorage<boolean>(
+    LocalStorageKeys.UPDATE_ORACLE,
+    DEFAULT_SETTINGS.updateOracle,
+  )

  const displayCurrenciesOptions = useMemo(
    () =>
@@ -148,6 +152,13 @@ export default function SettingsModal() {
    handleLendAssets(DEFAULT_SETTINGS.enableAutoLendGlobal)
  }, [handleDisplayCurrency, handleReduceMotion, handleLendAssets, handleSlippage])

+  const handleUpdateOracle = useCallback(
+    (value: boolean) => {
+      setUpdateOracle(value)
+    },
+    [setUpdateOracle],
+  )
+
  const showResetModal = useCallback(() => {
    showResetDialog({
      icon: (
@@ -196,6 +207,15 @@ export default function SettingsModal() {
        description='By turning this on you will automatically lend out all the assets you deposit into your Credit Accounts to earn yield.'
        withStatus
      />
+
+      <SettingsSwitch
+        onChange={handleUpdateOracle}
+        name='updateOracle'
+        value={updateOracle}
+        label='Update Pyth Oracles on transactions'
+        description={`When this setting is on, your Mars transactions will automatically trigger an update of Pyth's price oracles. This increases the accuracy of the prices shown in the UI. In some instances, this could cause your transactions to fail when using a Ledger hardware wallet. If you encounter transaction failures with Ledger, please turn this setting off.`}
+        withStatus
+      />
      <SettingsSwitch
        onChange={handleReduceMotion}
        name='reduceMotion'
@@ -1,6 +1,6 @@
-import Button from 'components/Button'
+import Button from 'components/common/Button'
 import { NoIcon, YesIcon } from 'components/Modals/AlertDialog/ButtonIcons'
-import Text from 'components/Text'
+import Text from 'components/common/Text'
 import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'

@@ -1,5 +1,5 @@
-import { LockUnlocked } from 'components/Icons'
-import Modal from 'components/Modal'
+import { LockUnlocked } from 'components/common/Icons'
+import Modal from 'components/Modals/Modal'
 import UnlockModalContent from 'components/Modals/Unlock/UnlockModalContent'
 import useStore from 'store'

@@ -1,14 +1,14 @@
 import BigNumber from 'bignumber.js'
 import React, { useEffect, useMemo, useState } from 'react'

-import Button from 'components/Button'
-import DepositCapMessage from 'components/DepositCapMessage'
-import DisplayCurrency from 'components/DisplayCurrency'
-import Divider from 'components/Divider'
-import { ArrowRight, ExclamationMarkCircled } from 'components/Icons'
-import Index from 'components/Slider'
-import Text from 'components/Text'
-import TokenInput from 'components/TokenInput'
+import Button from 'components/common/Button'
+import DepositCapMessage from 'components/common/DepositCapMessage'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import Divider from 'components/common/Divider'
+import { ArrowRight, ExclamationMarkCircled } from 'components/common/Icons'
+import Index from 'components/common/Slider'
+import Text from 'components/common/Text'
+import TokenInput from 'components/common/TokenInput'
 import { BN_ZERO } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAllAssets from 'hooks/assets/useAllAssets'
@@ -1,8 +1,8 @@
 import classNames from 'classnames'
 import { useMemo } from 'react'

-import DisplayCurrency from 'components/DisplayCurrency'
-import Text from 'components/Text'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import Text from 'components/common/Text'
 import { BN_ZERO } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAllAssets from 'hooks/assets/useAllAssets'
@@ -1,16 +1,16 @@
 import BigNumber from 'bignumber.js'
 import { useMemo, useState } from 'react'

-import Button from 'components/Button'
-import DepositCapMessage from 'components/DepositCapMessage'
-import DisplayCurrency from 'components/DisplayCurrency'
-import Divider from 'components/Divider'
-import { Gauge } from 'components/Gauge'
-import { ArrowRight, ExclamationMarkCircled } from 'components/Icons'
-import Slider from 'components/Slider'
-import Switch from 'components/Switch'
-import Text from 'components/Text'
-import TokenInput from 'components/TokenInput'
+import Button from 'components/common/Button'
+import DepositCapMessage from 'components/common/DepositCapMessage'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import Divider from 'components/common/Divider'
+import { Gauge } from 'components/common/Gauge'
+import { ArrowRight, ExclamationMarkCircled } from 'components/common/Icons'
+import Slider from 'components/common/Slider'
+import Switch from 'components/common/Switch'
+import Text from 'components/common/Text'
+import TokenInput from 'components/common/TokenInput'
 import { BN_ZERO } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAllAssets from 'hooks/assets/useAllAssets'
@@ -2,8 +2,8 @@ import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { useMemo } from 'react'

-import DisplayCurrency from 'components/DisplayCurrency'
-import Text from 'components/Text'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import Text from 'components/common/Text'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import usePrices from 'hooks/usePrices'
@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from 'react'

-import Accordion from 'components/Accordion'
-import AccountSummary from 'components/Account/AccountSummary'
+import Accordion from 'components/common/Accordion'
+import AccountSummary from 'components/account/AccountSummary'
 import VaultBorrowings from 'components/Modals/Vault/VaultBorrowings'
 import VaultBorrowingsSubTitle from 'components/Modals/Vault/VaultBorrowingsSubTitle'
 import VaultDeposit from 'components/Modals/Vault/VaultDeposits'
 import VaultDepositSubTitle from 'components/Modals/Vault/VaultDepositsSubTitle'
-import Text from 'components/Text'
+import Text from 'components/common/Text'
 import { BN_ZERO } from 'constants/math'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useDepositVault from 'hooks/broadcast/useDepositVault'
@@ -1,8 +1,8 @@
 import { useMemo } from 'react'

-import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
-import TitleAndSubCell from 'components/TitleAndSubCell'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import TitleAndSubCell from 'components/common/TitleAndSubCell'
 import { BN_ZERO } from 'constants/math'
 import { PRICE_ORACLE_DECIMALS } from 'constants/query'
 import { BNCoin } from 'types/classes/BNCoin'
@@ -1,15 +1,15 @@
 import moment from 'moment'
 import { useCallback, useMemo } from 'react'

-import DoubleLogo from 'components/DoubleLogo'
-import { InfoCircle } from 'components/Icons'
-import Modal from 'components/Modal'
+import DoubleLogo from 'components/common/DoubleLogo'
+import { InfoCircle } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
+import Modal from 'components/Modals/Modal'
 import VaultModalContent from 'components/Modals/Vault/VaultModalContent'
 import VaultModalContentHeader from 'components/Modals/Vault/VaultModalContentHeader'
-import Text from 'components/Text'
-import { Tooltip } from 'components/Tooltip'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAsset from 'hooks/assets/useAsset'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'

 export default function VaultModalController() {
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'

-import AssetSelectTable from 'components/Modals/AssetsSelect/AssetSelectTable'
-import SearchBar from 'components/SearchBar'
+import AssetsSelect from 'components/Modals/AssetsSelect'
+import SearchBar from 'components/common/SearchBar'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useStore from 'store'
 import { byDenom } from 'utils/array'
@@ -59,8 +59,7 @@ export default function WalletAssetsModalContent(props: Props) {
        />
      </div>
      <div className='max-h-[446px] overflow-y-scroll scrollbar-hide'>
-        <AssetSelectTable
-          isBorrow={isBorrow}
+        <AssetsSelect
          assets={filteredAssets}
          onChangeSelected={onChangeSelect}
          selectedDenoms={selectedDenoms}
@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react'

-import Button from 'components/Button'
-import Modal from 'components/Modal'
+import Button from 'components/common/Button'
+import Modal from 'components/Modals/Modal'
 import WalletAssetsModalContent from 'components/Modals/WalletAssets/WalletAssetsModalContent'
-import Text from 'components/Text'
+import Text from 'components/common/Text'
 import useStore from 'store'

 export default function WalletAssetsModal() {
@@ -1,10 +1,10 @@
-import Button from 'components/Button'
-import { CircularProgress } from 'components/CircularProgress'
-import DisplayCurrency from 'components/DisplayCurrency'
-import DoubleLogo from 'components/DoubleLogo'
-import { FormattedNumber } from 'components/FormattedNumber'
-import Modal from 'components/Modal'
-import Text from 'components/Text'
+import Modal from 'components/Modals/Modal'
+import Button from 'components/common/Button'
+import { CircularProgress } from 'components/common/CircularProgress'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import DoubleLogo from 'components/common/DoubleLogo'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import Text from 'components/common/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { ORACLE_DENOM } from 'constants/oracle'
@@ -73,17 +73,19 @@ export default function WithdrawFromVaultsModal() {
                  primaryDenom={vault.denoms.primary}
                  secondaryDenom={vault.denoms.secondary}
                />
-                <div className='flex flex-wrap flex-1'>
-                  <Text className='w-full'>{vault.name}</Text>
-                  <Text size='sm' className='w-full text-white/50'>
+                <div className='flex flex-wrap flex-grow'>
+                  <Text size='sm' className='w-full'>
+                    {vault.name}
+                  </Text>
+                  <Text size='xs' className='w-full text-white/50'>
                    Unlocked
                  </Text>
                </div>
-                <div className='flex flex-wrap'>
-                  <DisplayCurrency coin={coin} className='w-full text-right' />
+                <div className='flex flex-wrap flex-shrink max-w-1/2'>
+                  <DisplayCurrency coin={coin} className='w-full text-sm text-right' />
                  <FormattedNumber
                    amount={Number(primaryAssetAmount.toPrecision(4))}
-                    className='w-full text-sm text-right text-white/50'
+                    className='w-full text-xs text-right text-white/50'
                    options={{
                      suffix: ` ${vault.symbols.primary}`,
                      maxDecimals: primaryAsset.decimals,
@@ -92,7 +94,7 @@ export default function WithdrawFromVaultsModal() {
                  />
                  <FormattedNumber
                    amount={Number(secondaryAssetAmount.toPrecision(4))}
-                    className='w-full text-sm text-right text-white/50'
+                    className='w-full text-xs text-right text-white/50'
                    options={{
                      suffix: ` ${vault.symbols.secondary}`,
                      maxDecimals: secondaryAsset.decimals,
@@ -1,63 +0,0 @@
-import { flexRender, Row as TanstackRow, Table as TanstackTable } from '@tanstack/react-table'
-import classNames from 'classnames'
-
-interface Props<T> {
-  row: TanstackRow<T>
-  table: TanstackTable<T>
-  renderExpanded?: (row: TanstackRow<T>, table: TanstackTable<T>) => JSX.Element
-  rowClassName?: string
-  rowClickHandler?: () => void
-  spacingClassName?: string
-  isBalancesTable?: boolean
-  className?: string
-}
-
-function getBorderColor(row: AccountBalanceRow) {
-  return row.type === 'borrowing' ? 'border-loss' : 'border-profit'
-}
-
-export default function Row<T>(props: Props<T>) {
-  const canExpand = !!props.renderExpanded
-  return (
-    <>
-      <tr
-        key={`${props.row.id}-row`}
-        className={classNames(
-          'group/row transition-bg',
-          props.renderExpanded && 'hover:cursor-pointer',
-          canExpand && props.row.getIsExpanded() ? 'is-expanded bg-black/20' : 'hover:bg-white/5',
-        )}
-        onClick={(e) => {
-          e.preventDefault()
-          const isExpanded = props.row.getIsExpanded()
-          props.table.resetExpanded()
-          !isExpanded && props.row.toggleExpanded()
-        }}
-      >
-        {props.row.getVisibleCells().map((cell) => {
-          const isSymbolOrName = cell.column.id === 'symbol' || cell.column.id === 'name'
-          const borderClasses =
-            props.isBalancesTable && isSymbolOrName
-              ? classNames('border-l', getBorderColor(cell.row.original as AccountBalanceRow))
-              : ''
-          return (
-            <td
-              key={cell.id}
-              className={classNames(
-                isSymbolOrName ? 'text-left' : 'text-right',
-                props.spacingClassName ?? 'px-3 py-4',
-                borderClasses,
-                cell.column.columnDef.meta?.className,
-              )}
-            >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </td>
-          )
-        })}
-      </tr>
-      {props.row.getIsExpanded() &&
-        props.renderExpanded &&
-        props.renderExpanded(props.row, props.table)}
-    </>
-  )
-}
@@ -1,11 +1,11 @@
 import classNames from 'classnames'
 import moment from 'moment'

-import Card from 'components/Card'
-import Divider from 'components/Divider'
-import Text from 'components/Text'
-import { TextLink } from 'components/TextLink'
-import { generateToastContent } from 'components/Toaster'
+import Card from 'components/common/Card'
+import Divider from 'components/common/Divider'
+import Text from 'components/common/Text'
+import { TextLink } from 'components/common/TextLink'
+import { generateToastContent } from 'components/common/Toaster'
 import useTransactions from 'hooks/localStorage/useTransactions'
 import useStore from 'store'

@@ -2,10 +2,10 @@ import { useShuttle } from '@delphi-labs/shuttle-react'
 import Image from 'next/image'
 import { useCallback, useEffect, useMemo } from 'react'

-import Button from 'components/Button'
-import FullOverlayContent from 'components/FullOverlayContent'
-import { ChevronRight } from 'components/Icons'
-import Text from 'components/Text'
+import Button from 'components/common/Button'
+import FullOverlayContent from 'components/common/FullOverlayContent'
+import { ChevronRight } from 'components/common/Icons'
+import Text from 'components/common/Text'
 import WalletFetchBalancesAndAccounts from 'components/Wallet/WalletFetchBalancesAndAccounts'
 import WalletSelect from 'components/Wallet/WalletSelect'
 import { BRIDGES } from 'constants/bridges'
@@ -1,8 +1,8 @@
 import { ReactNode, useCallback } from 'react'

-import Button from 'components/Button'
-import { Wallet } from 'components/Icons'
-import TermsOfService from 'components/TermsOfService'
+import Button from 'components/common/Button'
+import { Wallet } from 'components/common/Icons'
+import TermsOfService from 'components/common/TermsOfService'
 import WalletSelect from 'components/Wallet/WalletSelect'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'
@@ -6,12 +6,12 @@ import { useCallback, useEffect, useState } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import useClipboard from 'react-use-clipboard'

-import Button from 'components/Button'
-import { CircularProgress } from 'components/CircularProgress'
-import { FormattedNumber } from 'components/FormattedNumber'
-import { Check, Copy, ExternalLink, Wallet } from 'components/Icons'
-import Overlay from 'components/Overlay'
-import Text from 'components/Text'
+import Button from 'components/common/Button'
+import { CircularProgress } from 'components/common/CircularProgress'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { Check, Copy, ExternalLink, Wallet } from 'components/common/Icons'
+import Overlay from 'components/common/Overlay'
+import Text from 'components/common/Text'
 import RecentTransactions from 'components/Wallet/RecentTransactions'
 import WalletSelect from 'components/Wallet/WalletSelect'
 import chains from 'configs/chains'
@@ -2,8 +2,8 @@ import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { useShuttle } from '@delphi-labs/shuttle-react'
 import { useCallback, useEffect, useMemo } from 'react'

-import { CircularProgress } from 'components/CircularProgress'
-import FullOverlayContent from 'components/FullOverlayContent'
+import { CircularProgress } from 'components/common/CircularProgress'
+import FullOverlayContent from 'components/common/FullOverlayContent'
 import WalletSelect from 'components/Wallet//WalletSelect'
 import WalletFetchBalancesAndAccounts from 'components/Wallet/WalletFetchBalancesAndAccounts'
 import useChainConfig from 'hooks/useChainConfig'
@@ -1,9 +1,9 @@
 import { Suspense, useEffect, useMemo } from 'react'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'

-import AccountCreateFirst from 'components/Account/AccountCreateFirst'
-import { CircularProgress } from 'components/CircularProgress'
-import FullOverlayContent from 'components/FullOverlayContent'
+import AccountCreateFirst from 'components/account/AccountCreateFirst'
+import { CircularProgress } from 'components/common/CircularProgress'
+import FullOverlayContent from 'components/common/FullOverlayContent'
 import WalletBridges from 'components/Wallet/WalletBridges'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useBaseAsset from 'hooks/assets/useBasetAsset'
@@ -4,10 +4,10 @@ import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
 import QRCode from 'react-qr-code'

-import Button from 'components/Button'
-import FullOverlayContent from 'components/FullOverlayContent'
-import { ChevronLeft, ChevronRight } from 'components/Icons'
-import Text from 'components/Text'
+import Button from 'components/common/Button'
+import FullOverlayContent from 'components/common/FullOverlayContent'
+import { ChevronLeft, ChevronRight } from 'components/common/Icons'
+import Text from 'components/common/Text'
 import WalletConnecting from 'components/Wallet/WalletConnecting'
 import { WALLETS } from 'constants/wallets'
 import useStore from 'store'
@@ -1,4 +1,4 @@
-import AssetRate from 'components/Asset/AssetRate'
+import AssetRate from 'components/common/assets/AssetRate'
 import { byDenom } from 'utils/array'

 export const APY_META = { accessorKey: 'apy', header: 'APY', meta: { className: 'w-30' } }
@@ -7,7 +7,7 @@ interface Props {
  apy: number
  markets: Market[]
  denom: string
-  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
+  type: PositionType
 }

 export default function Apr(props: Props) {
@@ -20,7 +20,7 @@ export default function Apr(props: Props) {
    <AssetRate
      className='justify-end text-xs'
      rate={apy}
-      isEnabled={type !== 'lending' || isEnabled}
+      isEnabled={type !== 'lend' || isEnabled}
      type='apy'
      orientation='ltr'
    />
@@ -0,0 +1,19 @@
+import Text from 'components/common/Text'
+export const ASSET_META = { accessorKey: 'symbol', header: 'Asset', id: 'symbol' }
+
+interface Props {
+  symbol: string
+  type: PositionType
+}
+
+export default function Asset(props: Props) {
+  const { symbol, type } = props
+  return (
+    <Text size='xs'>
+      {symbol}
+      {type === 'borrow' && <span className='ml-1 text-loss'>(debt)</span>}
+      {type === 'lend' && <span className='ml-1 text-profit'>(lent)</span>}
+      {type === 'vault' && <span className='ml-1 text-profit'>(farm)</span>}
+    </Text>
+  )
+}
@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react'

-import DisplayCurrency from 'components/DisplayCurrency'
-import { InfoCircle } from 'components/Icons'
-import Text from 'components/Text'
-import { Tooltip } from 'components/Tooltip'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { InfoCircle } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
 import useLiquidationPrice from 'hooks/useLiquidationPrice'
 import { BNCoin } from 'types/classes/BNCoin'
 import { LiquidationPriceKind } from 'utils/health_computer'
@@ -20,7 +20,7 @@ interface Props {
  amount: number
  computeLiquidationPrice: (denom: string, kind: LiquidationPriceKind) => number | null
  denom: string
-  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
+  type: PositionType
  account: Account
 }

@@ -31,7 +31,7 @@ export default function LiqPrice(props: Props) {

  const liqPrice = useMemo(() => {
    if (type === 'vault' || amount === 0) return 0
-    return computeLiquidationPrice(denom, type === 'borrowing' ? 'debt' : 'asset')
+    return computeLiquidationPrice(denom, type === 'borrow' ? 'debt' : 'asset')
  }, [amount, computeLiquidationPrice, denom, type])

  const { liquidationPrice } = useLiquidationPrice(liqPrice)
@@ -1,4 +1,4 @@
-import DisplayCurrency from 'components/DisplayCurrency'
+import DisplayCurrency from 'components/common/DisplayCurrency'
 import usePrice from 'hooks/usePrice'
 import { BNCoin } from 'types/classes/BNCoin'
 import { BN } from 'utils/helpers'
@@ -8,7 +8,7 @@ export const PRICE_META = { id: 'price', header: 'Price', meta: { className: 'w-
 interface Props {
  amount: number
  denom: string
-  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
+  type: PositionType
 }

 export default function Price(props: Props) {
@@ -1,8 +1,8 @@
 import { Row } from '@tanstack/react-table'
 import classNames from 'classnames'

-import { getAmountChangeColor } from 'components/Account/AccountBalancesTable/functions'
-import { FormattedNumber } from 'components/FormattedNumber'
+import { getAmountChangeColor } from 'components/account/AccountBalancesTable/functions'
+import { FormattedNumber } from 'components/common/FormattedNumber'
 import { MAX_AMOUNT_DECIMALS, MIN_AMOUNT } from 'constants/math'
 import { formatAmountToPrecision } from 'utils/formatters'

@@ -12,7 +12,7 @@ interface Props {
  size: number
  amountChange: BigNumber
  denom: string
-  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
+  type: PositionType
 }

 export const sizeSortingFn = (a: Row<AccountBalanceRow>, b: Row<AccountBalanceRow>): number => {
@@ -1,8 +1,8 @@
 import { Row } from '@tanstack/react-table'
 import classNames from 'classnames'

-import { getAmountChangeColor } from 'components/Account/AccountBalancesTable/functions'
-import DisplayCurrency from 'components/DisplayCurrency'
+import { getAmountChangeColor } from 'components/account/AccountBalancesTable/functions'
+import DisplayCurrency from 'components/common/DisplayCurrency'
 import { ORACLE_DENOM } from 'constants/oracle'
 import { BNCoin } from 'types/classes/BNCoin'
 import { BN } from 'utils/helpers'
@@ -12,10 +12,19 @@ export const VALUE_META = { accessorKey: 'value', header: 'Value' }
 interface Props {
  amountChange: BigNumber
  value: string
-  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
+  type: PositionType
 }

-export const valueSortingFn = (a: Row<AccountBalanceRow>, b: Row<AccountBalanceRow>): number => {
+export const valueBalancesSortingFn = (
+  a: Row<AccountBalanceRow>,
+  b: Row<AccountBalanceRow>,
+): number => {
+  const valueA = BN(a.original.value)
+  const valueB = BN(b.original.value)
+  return valueA.minus(valueB).toNumber()
+}
+
+export const valuePerpSortingFn = (a: Row<AccountPerpRow>, b: Row<AccountPerpRow>): number => {
  const valueA = BN(a.original.value)
  const valueB = BN(b.original.value)
  return valueA.minus(valueB).toNumber()
@@ -24,17 +33,12 @@ export const valueSortingFn = (a: Row<AccountBalanceRow>, b: Row<AccountBalanceR
 export default function Value(props: Props) {
  const { amountChange, type, value } = props
  const color = getAmountChangeColor(type, amountChange)
-  const allowZero = !amountChange.isZero()
  const coin = new BNCoin({
    denom: ORACLE_DENOM,
    amount: value,
  })

  return (
-    <DisplayCurrency
-      coin={coin}
-      className={classNames('text-xs text-right', color)}
-      showZero={!allowZero}
-    />
+    <DisplayCurrency coin={coin} className={classNames('text-xs text-right', color)} showZero />
  )
 }
@@ -1,18 +1,18 @@
 import { ColumnDef, Row } from '@tanstack/react-table'
 import { useMemo } from 'react'

-import Apy, { APY_META } from 'components/Account/AccountBalancesTable/Columns/Apy'
-import Asset, { ASSET_META } from 'components/Account/AccountBalancesTable/Columns/Asset'
-import LiqPrice, { LIQ_META } from 'components/Account/AccountBalancesTable/Columns/LiqPrice'
-import Price, { PRICE_META } from 'components/Account/AccountBalancesTable/Columns/Price'
+import Apy, { APY_META } from 'components/account/AccountBalancesTable/Columns/Apy'
+import Asset, { ASSET_META } from 'components/account/AccountBalancesTable/Columns/Asset'
+import LiqPrice, { LIQ_META } from 'components/account/AccountBalancesTable/Columns/LiqPrice'
+import Price, { PRICE_META } from 'components/account/AccountBalancesTable/Columns/Price'
 import Size, {
  SIZE_META,
  sizeSortingFn,
-} from 'components/Account/AccountBalancesTable/Columns/Size'
+} from 'components/account/AccountBalancesTable/Columns/Size'
 import Value, {
  VALUE_META,
-  valueSortingFn,
-} from 'components/Account/AccountBalancesTable/Columns/Value'
+  valueBalancesSortingFn,
+} from 'components/account/AccountBalancesTable/Columns/Value'
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useStore from 'store'
@@ -41,8 +41,7 @@ export default function useAccountBalancesColumns(
            type={row.original.type}
          />
        ),
-
-        sortingFn: valueSortingFn,
+        sortingFn: valueBalancesSortingFn,
      },
      {
        ...SIZE_META,
@@ -3,7 +3,7 @@ import { BNCoin } from 'types/classes/BNCoin'
 import { demagnify, getCoinValue } from 'utils/formatters'

 export function getAssetAccountBalanceRow(
-  type: 'deposits' | 'borrowing' | 'lending',
+  type: 'deposit' | 'borrow' | 'lend',
  asset: Asset,
  prices: BNCoin[],
  assets: Asset[],
@@ -57,11 +57,9 @@ export function getVaultAccountBalanceRow(
  }
 }

-export function getAmountChangeColor(
-  type: 'deposits' | 'borrowing' | 'lending' | 'vault',
-  amount: BigNumber,
-) {
-  if (type === 'borrowing') {
+export function getAmountChangeColor(type: PositionType, amount: BigNumber) {
+  if (type === 'perp') return ''
+  if (type === 'borrow') {
    if (amount.isGreaterThan(0)) return 'text-loss'
    if (amount.isLessThan(0)) return 'text-profit'
  }
@@ -1,14 +1,14 @@
 import classNames from 'classnames'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'

-import useAccountBalancesColumns from 'components/Account/AccountBalancesTable/Columns/useAccountBalancesColumns'
-import useAccountBalanceData from 'components/Account/AccountBalancesTable/useAccountBalanceData'
-import AccountFundFullPage from 'components/Account/AccountFund/AccountFundFullPage'
-import ActionButton from 'components/Button/ActionButton'
-import Card from 'components/Card'
-import Table from 'components/Table'
+import useAccountBalancesColumns from 'components/account/AccountBalancesTable/Columns/useAccountBalancesColumns'
+import useAccountBalanceData from 'components/account/AccountBalancesTable/useAccountBalanceData'
+import AccountFundFullPage from 'components/account/AccountFund/AccountFundFullPage'
+import ActionButton from 'components/common/Button/ActionButton'
+import Card from 'components/common/Card'
+import Table from 'components/common/Table'
 import ConditionalWrapper from 'hocs/ConditionalWrapper'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useStore from 'store'
 import { getPage, getRoute } from 'utils/route'

@@ -89,7 +89,7 @@ export default function AccountBalancesTable(props: Props) {
      initialSorting={[]}
      spacingClassName='p-2'
      hideCard={hideCard}
-      isBalancesTable
+      type='balances'
    />
  )
 }
@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 import {
  getAssetAccountBalanceRow,
  getVaultAccountBalanceRow,
-} from 'components/Account/AccountBalancesTable/functions'
+} from 'components/account/AccountBalancesTable/functions'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useHLSStakingAssets from 'hooks/useHLSStakingAssets'
 import usePrices from 'hooks/usePrices'
@@ -38,7 +38,7 @@ export default function useAccountBalanceData(props: Props) {
        : 0
      const prevDeposit = updatedAccount ? account?.deposits.find(byDenom(deposit.denom)) : deposit
      deposits.push(
-        getAssetAccountBalanceRow('deposits', asset, prices, assets, deposit, apy, prevDeposit),
+        getAssetAccountBalanceRow('deposit', asset, prices, assets, deposit, apy, prevDeposit),
      )
    })

@@ -50,7 +50,7 @@ export default function useAccountBalanceData(props: Props) {
      const prevLending = updatedAccount
        ? account?.lends.find((position) => position.denom === lending.denom)
        : lending
-      return getAssetAccountBalanceRow('lending', asset, prices, assets, lending, apy, prevLending)
+      return getAssetAccountBalanceRow('lend', asset, prices, assets, lending, apy, prevLending)
    })

    const vaults = accountVaults.map((vault) => {
@@ -67,7 +67,7 @@ export default function useAccountBalanceData(props: Props) {
      const prevDebt = updatedAccount
        ? account?.debts.find((position) => position.denom === debt.denom)
        : debt
-      return getAssetAccountBalanceRow('borrowing', asset, prices, assets, debt, apy, prevDebt)
+      return getAssetAccountBalanceRow('borrow', asset, prices, assets, debt, apy, prevDebt)
    })
    return [...deposits, ...lends, ...vaults, ...debts]
  }, [
@@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { useMemo } from 'react'

-import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
-import { ArrowRight } from 'components/Icons'
-import Text from 'components/Text'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { ArrowRight } from 'components/common/Icons'
+import Text from 'components/common/Text'
 import { BN_ZERO, MAX_AMOUNT_DECIMALS } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAllAssets from 'hooks/assets/useAllAssets'
@@ -42,7 +42,7 @@ export default function AccountComposition(props: Props) {
  const { data: prices } = usePrices()
  const { data: hlsStrategies } = useHLSStakingAssets()
  const assets = useAllAssets()
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
  const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
  const { availableAssets: lendingAvailableAssets, accountLentAssets } =
    useLendingMarketAssetsTableData()
@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'

-import AccountFundFullPage from 'components/Account/AccountFund/AccountFundFullPage'
-import FullOverlayContent from 'components/FullOverlayContent'
+import AccountFundFullPage from 'components/account/AccountFund/AccountFundFullPage'
+import FullOverlayContent from 'components/common/FullOverlayContent'
 import WalletSelect from 'components/Wallet/WalletSelect'
 import useToggle from 'hooks/useToggle'
 import useStore from 'store'
@@ -1,7 +1,7 @@
 import classNames from 'classnames'

-import { FormattedNumber } from 'components/FormattedNumber'
-import { ArrowRight } from 'components/Icons'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { ArrowRight } from 'components/common/Icons'

 interface Props {
  leverage: number
@@ -1,6 +1,6 @@
-import { HealthGauge } from 'components/Account/Health/HealthGauge'
-import Loading from 'components/Loading'
-import Text from 'components/Text'
+import { HealthGauge } from 'components/account/Health/HealthGauge'
+import Loading from 'components/common/Loading'
+import Text from 'components/common/Text'

 export default function Skeleton() {
  return (
@@ -2,30 +2,31 @@ import classNames from 'classnames'
 import { useCallback, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'

-import AccountBalancesTable from 'components/Account/AccountBalancesTable'
-import AccountComposition from 'components/Account/AccountComposition'
-import AccountDetailsLeverage from 'components/Account/AccountDetails/AccountDetailsLeverage'
-import Skeleton from 'components/Account/AccountDetails/Skeleton'
-import { HealthGauge } from 'components/Account/Health/HealthGauge'
-import EscButton from 'components/Button/EscButton'
-import { glowElement } from 'components/Button/utils'
-import Card from 'components/Card'
-import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
-import { ThreeDots } from 'components/Icons'
-import Text from 'components/Text'
+import AccountBalancesTable from 'components/account/AccountBalancesTable'
+import AccountComposition from 'components/account/AccountComposition'
+import AccountDetailsLeverage from 'components/account/AccountDetails/AccountDetailsLeverage'
+import Skeleton from 'components/account/AccountDetails/Skeleton'
+import AccountPerpPositionTable from 'components/account/AccountPerpPositionTable'
+import { HealthGauge } from 'components/account/Health/HealthGauge'
+import EscButton from 'components/common/Button/EscButton'
+import { glowElement } from 'components/common/Button/utils'
+import Card from 'components/common/Card'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { ThreeDots } from 'components/common/Icons'
+import Text from 'components/common/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useAccounts from 'hooks/accounts/useAccounts'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'
 import useAccountId from 'hooks/useAccountId'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
-import useCurrentAccount from 'hooks/useCurrentAccount'
-import useHealthComputer from 'hooks/useHealthComputer'
 import useHLSStakingAssets from 'hooks/useHLSStakingAssets'
+import useHealthComputer from 'hooks/useHealthComputer'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
 import usePrices from 'hooks/usePrices'
 import useStore from 'store'
@@ -91,7 +92,7 @@ function AccountDetails(props: Props) {
    return updatedLeverage
  }, [updatedAccount, prices, leverage, assets])

-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
  const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])

  const { availableAssets: lendingAvailableAssets, accountLentAssets } =
@@ -114,7 +115,10 @@ function AccountDetails(props: Props) {
      ),
    [account, assets, borrowAssetsData, hlsStrategies, lendingAssetsData, prices, updatedAccount],
  )
-  const isFullWidth = location.pathname.includes('trade') || location.pathname === '/'
+  const isFullWidth =
+    location.pathname.includes('trade') ||
+    location.pathname === '/' ||
+    location.pathname.includes('perps')

  function AccountDetailsHeader() {
    const onClose = useCallback(() => useStore.setState({ accountDetailsExpanded: false }), [])
@@ -215,6 +219,12 @@ function AccountDetails(props: Props) {
              lendingData={lendingAssetsData}
              hideCard
            />
+            {account.perps.length > 0 && (
+              <>
+                <Text className='w-full px-4 py-2 text-white bg-white/10'>Perp Positions</Text>
+                <AccountPerpPositionTable account={account} hideCard />
+              </>
+            )}
          </Card>
        </div>
      </div>
@@ -1,12 +1,12 @@
 import classNames from 'classnames'
 import { useCallback, useEffect, useMemo, useState } from 'react'

-import AccountFundRow from 'components/Account/AccountFund/AccountFundRow'
-import Button from 'components/Button'
-import DepositCapMessage from 'components/DepositCapMessage'
-import { ArrowRight, Plus } from 'components/Icons'
-import SwitchAutoLend from 'components/Switch/SwitchAutoLend'
-import Text from 'components/Text'
+import AccountFundRow from 'components/account/AccountFund/AccountFundRow'
+import Button from 'components/common/Button'
+import DepositCapMessage from 'components/common/DepositCapMessage'
+import { ArrowRight, Plus } from 'components/common/Icons'
+import SwitchAutoLend from 'components/common/Switch/SwitchAutoLend'
+import Text from 'components/common/Text'
 import WalletBridges from 'components/Wallet/WalletBridges'
 import { BN_ZERO } from 'constants/math'
 import useBaseAsset from 'hooks/assets/useBasetAsset'
@@ -165,7 +165,7 @@ export default function AccountFundContent(props: Props) {

        <Button
          className='w-full mt-4'
-          text='Select assets'
+          text='Select Assets'
          color='tertiary'
          rightIcon={<Plus />}
          iconClassName='w-3'
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'

-import AccountFundContent from 'components/Account/AccountFund/AccountFundContent'
-import Card from 'components/Card'
-import { CircularProgress } from 'components/CircularProgress'
-import FullOverlayContent from 'components/FullOverlayContent'
+import AccountFundContent from 'components/account/AccountFund/AccountFundContent'
+import Card from 'components/common/Card'
+import { CircularProgress } from 'components/common/CircularProgress'
+import FullOverlayContent from 'components/common/FullOverlayContent'
 import useAccounts from 'hooks/accounts/useAccounts'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAccountId from 'hooks/useAccountId'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'

 export default function AccountFundFullPage() {
@@ -1,4 +1,4 @@
-import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
 import useAsset from 'hooks/assets/useAsset'
 import { BNCoin } from 'types/classes/BNCoin'
@@ -1,10 +1,10 @@
 import { useCallback, useMemo } from 'react'

-import AccountFundFullPage from 'components/Account/AccountFund/AccountFundFullPage'
-import Skeleton from 'components/Account/AccountList/Skeleton'
-import Button from 'components/Button'
-import { ArrowDownLine, ArrowUpLine, TrashBin } from 'components/Icons'
-import SwitchAutoLend from 'components/Switch/SwitchAutoLend'
+import AccountFundFullPage from 'components/account/AccountFund/AccountFundFullPage'
+import Skeleton from 'components/account/AccountList/Skeleton'
+import Button from 'components/common/Button'
+import { ArrowDownLine, ArrowUpLine, TrashBin } from 'components/common/Icons'
+import SwitchAutoLend from 'components/common/Switch/SwitchAutoLend'
 import useAccount from 'hooks/accounts/useAccount'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
@@ -33,7 +33,7 @@ export default function AccountStats(props: Props) {
    [account, assets, prices],
  )
  const { health, healthFactor } = useHealthComputer(account)
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
  const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
  const { availableAssets: lendingAvailableAssets, accountLentAssets } =
    useLendingMarketAssetsTableData()
@@ -1,10 +1,10 @@
-import HealthBar from 'components/Account/Health/HealthBar'
-import HealthIcon from 'components/Account/Health/HealthIcon'
-import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
-import { ArrowChartLineUp } from 'components/Icons'
-import Loading from 'components/Loading'
-import Text from 'components/Text'
+import HealthBar from 'components/account/Health/HealthBar'
+import HealthIcon from 'components/account/Health/HealthIcon'
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { ArrowChartLineUp } from 'components/common/Icons'
+import Loading from 'components/common/Loading'
+import Text from 'components/common/Text'
 import { ORACLE_DENOM } from 'constants/oracle'
 import { BNCoin } from 'types/classes/BNCoin'

@@ -2,10 +2,10 @@ import classNames from 'classnames'
 import { useEffect } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'

-import AccountStats from 'components/Account/AccountList/AccountStats'
-import Card from 'components/Card'
-import Radio from 'components/Radio'
-import Text from 'components/Text'
+import AccountStats from 'components/account/AccountList/AccountStats'
+import Card from 'components/common/Card'
+import Radio from 'components/common/Radio'
+import Text from 'components/common/Text'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'
@@ -1,7 +1,7 @@
 import { Suspense } from 'react'

-import AccountMenuContent from 'components/Account/AccountMenuContent'
-import Loading from 'components/Loading'
+import AccountMenuContent from 'components/account/AccountMenuContent'
+import Loading from 'components/common/Loading'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useStore from 'store'

@@ -2,13 +2,13 @@ import classNames from 'classnames'
 import { useCallback } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'

-import AccountCreateFirst from 'components/Account/AccountCreateFirst'
-import AccountFund from 'components/Account/AccountFund/AccountFundFullPage'
-import AccountList from 'components/Account/AccountList'
-import Button from 'components/Button'
-import { Account, Plus, PlusCircled } from 'components/Icons'
-import Overlay from 'components/Overlay'
-import Text from 'components/Text'
+import AccountCreateFirst from 'components/account/AccountCreateFirst'
+import AccountFund from 'components/account/AccountFund/AccountFundFullPage'
+import AccountList from 'components/account/AccountList'
+import Button from 'components/common/Button'
+import { Account, Plus, PlusCircled } from 'components/common/Icons'
+import Overlay from 'components/common/Overlay'
+import Text from 'components/common/Text'
 import WalletBridges from 'components/Wallet/WalletBridges'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useBaseAsset from 'hooks/assets/useBasetAsset'
@@ -0,0 +1,71 @@
+import { ReactNode } from 'react'
+
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
+import TradeDirection from 'components/perps/BalancesTable/Columns/TradeDirection'
+import { BN_ZERO } from 'constants/math'
+import usePerpsEnabledAssets from 'hooks/assets/usePerpsEnabledAssets'
+import { BNCoin } from 'types/classes/BNCoin'
+import { demagnify } from 'utils/formatters'
+export const ASSET_META = { accessorKey: 'symbol', header: 'Asset', id: 'symbol' }
+
+interface Props {
+  row: AccountPerpRow
+}
+
+function LabelAndValue(props: { label: string; children: ReactNode; className?: string }) {
+  const { label, children, className } = props
+
+  return (
+    <div className='flex items-center justify-between'>
+      <Text size='sm' className='text-white/60'>
+        {label}
+      </Text>
+      {children}
+    </div>
+  )
+}
+
+function TooltipContent(props: Props) {
+  const { row } = props
+  const assets = usePerpsEnabledAssets()
+  const asset = assets.find((asset) => asset.symbol === row.symbol)
+  if (!asset) return null
+
+  return (
+    <div className='flex flex-col flex-wrap gap-1 w-50'>
+      <LabelAndValue label='Entry Price'>
+        <FormattedNumber amount={row.entryPrice.toNumber()} options={{ prefix: '$' }} />
+      </LabelAndValue>
+      <LabelAndValue label='Size'>
+        <Text size='sm'>{demagnify(row.amount, asset)}</Text>
+      </LabelAndValue>
+      <LabelAndValue label='Realized PnL'>
+        <DisplayCurrency
+          className='text-sm text-right number'
+          coin={BNCoin.fromDenomAndBigNumber('usd', BN_ZERO)}
+          showZero
+        />
+      </LabelAndValue>
+      <LabelAndValue label='Unrealized PnL'>
+        <DisplayCurrency coin={row.pnl} options={{ abbreviated: false }} showZero isProfitOrLoss />
+      </LabelAndValue>
+    </div>
+  )
+}
+
+export default function Asset(props: Props) {
+  const { row } = props
+  return (
+    <Tooltip content={<TooltipContent row={row} />} type='info'>
+      <Text size='xs' className='flex items-center gap-1 no-wrap group/asset hover:cursor-help'>
+        <span className='pb-[1px] border-b border-white/20 border-dashed group-hover/asset:border-transparent'>
+          {row.symbol}
+        </span>
+        <TradeDirection tradeDirection={row.tradeDirection} />
+      </Text>
+    </Tooltip>
+  )
+}
@@ -0,0 +1,22 @@
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import { BNCoin } from 'types/classes/BNCoin'
+
+export const PNL_META = { id: 'pnl', header: 'Total PnL', meta: { className: 'w-30' } }
+
+interface Props {
+  pnl: BNCoin
+}
+
+export default function TotalPnL(props: Props) {
+  const { pnl } = props
+
+  return (
+    <DisplayCurrency
+      className='text-xs text-right number'
+      coin={pnl}
+      options={{ abbreviated: false }}
+      isProfitOrLoss
+      showZero
+    />
+  )
+}
@@ -0,0 +1,52 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import LiqPrice, { LIQ_META } from 'components/account/AccountBalancesTable/Columns/LiqPrice'
+import Value, {
+  VALUE_META,
+  valuePerpSortingFn,
+} from 'components/account/AccountBalancesTable/Columns/Value'
+import Asset, { ASSET_META } from 'components/account/AccountPerpPositionTable/Columns/Asset'
+import TotalPnL, { PNL_META } from 'components/account/AccountPerpPositionTable/Columns/TotalPnL'
+import useHealthComputer from 'hooks/useHealthComputer'
+import useStore from 'store'
+
+export default function useAccountPerpsColumns(account: Account, showLiquidationPrice?: boolean) {
+  const updatedAccount = useStore((s) => s.updatedAccount)
+
+  const { computeLiquidationPrice } = useHealthComputer(updatedAccount ?? account)
+
+  return useMemo<ColumnDef<AccountPerpRow>[]>(() => {
+    return [
+      {
+        ...ASSET_META,
+        cell: ({ row }) => <Asset row={row.original} />,
+      },
+      {
+        ...VALUE_META,
+        cell: ({ row }) => (
+          <Value amountChange={row.original.amountChange} value={row.original.value} type='perp' />
+        ),
+        sortingFn: valuePerpSortingFn,
+      },
+      {
+        ...LIQ_META,
+        header: 'Liq. Price',
+        enableSorting: false,
+        cell: ({ row }) => (
+          <LiqPrice
+            denom={row.original.denom}
+            computeLiquidationPrice={computeLiquidationPrice}
+            type='perp'
+            amount={row.original.amount.toNumber()}
+            account={updatedAccount ?? account}
+          />
+        ),
+      },
+      {
+        ...PNL_META,
+        cell: ({ row }) => <TotalPnL pnl={row.original.pnl} />,
+      },
+    ]
+  }, [computeLiquidationPrice, account, updatedAccount])
+}
@@ -0,0 +1,20 @@
+import { BNCoin } from 'types/classes/BNCoin'
+import { getCoinValue } from 'utils/formatters'
+
+export function getAssetAccountPerpRow(
+  asset: Asset,
+  prices: BNCoin[],
+  position: PerpsPosition,
+  assets: Asset[],
+  prev?: BNCoin,
+): AccountPerpRow {
+  const { denom, amount } = position
+  const amountChange = !prev ? position.amount : position.amount.minus(prev.amount)
+
+  return {
+    symbol: asset.symbol,
+    value: getCoinValue(BNCoin.fromDenomAndBigNumber(denom, amount), prices, assets).toString(),
+    amountChange,
+    ...position,
+  }
+}
--- a/Show More
+++ b/Show More