margin slider variations

.env.example

@@ -12,5 +12,4 @@ 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
 

package.json

@@ -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.94.1",
+    "@sentry/nextjs": "^7.91.0",
     "@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.21.3",
+    "react-router-dom": "^6.17.0",
     "react-spring": "^9.7.3",
     "react-toastify": "^9.1.3",
     "react-use-clipboard": "^1.0.9",
     "recharts": "^2.10.1",
-    "sharp": "^0.33.2",
+    "sharp": "^0.33.1",
     "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.2.4",
+    "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "shelljs": "^0.8.5",
     "tailwindcss": "^3.3.3",

src/api/hls/getHLSStakingAccounts.ts

@@ -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[0].denom,
+      (strategy) => strategy.denoms.deposit === account.deposits.at(0).denom,
     )
 
     if (!strategy) return

src/api/perps/getOpeningFee.ts

@@ -1,14 +1,10 @@
 import { getPerpsQueryClient } from 'api/cosmwasm-client'
 import { BNCoin } from 'types/classes/BNCoin'
 
-export default async function getOpeningFee(
-  chainConfig: ChainConfig,
-  denom: string,
-  amount: string,
-) {
+export default async function getOpeningFee(chainConfig: ChainConfig, denom: string, size: string) {
   const perpsClient = await getPerpsQueryClient(chainConfig)
 
   return perpsClient
-    .openingFee({ denom, size: amount as any })
+    .openingFee({ denom, size: size as any })
     .then((resp) => BNCoin.fromCoin(resp.fee))
 }

src/api/prices/getPriceData.ts

@@ -0,0 +1,18 @@
+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)
+}

src/api/prices/getPythPriceData.ts

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

src/api/vaults/getVaultAprs.ts

@@ -1,7 +1,6 @@
 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),

src/components/Accordion.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 
-import AccordionContent, { Item } from 'components/common/AccordionContent'
-import Card from 'components/common/Card'
+import AccordionContent, { Item } from 'components/AccordionContent'
+import Card from 'components/Card'
 
 interface Props {
   items: Item[]

src/components/AccordionContent.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 
-import { ChevronDown, ChevronRight } from 'components/common/Icons'
-import Text from 'components/common/Text'
+import { ChevronDown, ChevronRight } from 'components/Icons'
+import Text from 'components/Text'
 
 interface Props {
   item: Item

src/components/Account/AccountBalancesTable/Columns/Apy.tsx

@@ -1,4 +1,4 @@
-import AssetRate from 'components/common/assets/AssetRate'
+import AssetRate from 'components/Asset/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: PositionType
+  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
 }
 
 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 !== 'lend' || isEnabled}
+      isEnabled={type !== 'lending' || isEnabled}
       type='apy'
       orientation='ltr'
     />

src/components/Account/AccountBalancesTable/Columns/Asset.tsx

@@ -0,0 +1,22 @@
+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>
+  )
+}

src/components/Account/AccountBalancesTable/Columns/LiqPrice.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react'
 
-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 DisplayCurrency from 'components/DisplayCurrency'
+import { InfoCircle } from 'components/Icons'
+import Text from 'components/Text'
+import { Tooltip } from 'components/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: PositionType
+  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
   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 === 'borrow' ? 'debt' : 'asset')
+    return computeLiquidationPrice(denom, type === 'borrowing' ? 'debt' : 'asset')
   }, [amount, computeLiquidationPrice, denom, type])
 
   const { liquidationPrice } = useLiquidationPrice(liqPrice)

src/components/Account/AccountBalancesTable/Columns/Price.tsx

@@ -1,4 +1,4 @@
-import DisplayCurrency from 'components/common/DisplayCurrency'
+import DisplayCurrency from 'components/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: PositionType
+  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
 }
 
 export default function Price(props: Props) {

src/components/Account/AccountBalancesTable/Columns/Size.tsx

@@ -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/common/FormattedNumber'
+import { getAmountChangeColor } from 'components/Account/AccountBalancesTable/functions'
+import { FormattedNumber } from 'components/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: PositionType
+  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
 }
 
 export const sizeSortingFn = (a: Row<AccountBalanceRow>, b: Row<AccountBalanceRow>): number => {

src/components/Account/AccountBalancesTable/Columns/Value.tsx

@@ -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/common/DisplayCurrency'
+import { getAmountChangeColor } from 'components/Account/AccountBalancesTable/functions'
+import DisplayCurrency from 'components/DisplayCurrency'
 import { ORACLE_DENOM } from 'constants/oracle'
 import { BNCoin } from 'types/classes/BNCoin'
 import { BN } from 'utils/helpers'
@@ -12,19 +12,10 @@ export const VALUE_META = { accessorKey: 'value', header: 'Value' }
 interface Props {
   amountChange: BigNumber
   value: string
-  type: PositionType
+  type: 'deposits' | 'borrowing' | 'lending' | 'vault'
 }
 
-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 => {
+export const valueSortingFn = (a: Row<AccountBalanceRow>, b: Row<AccountBalanceRow>): number => {
   const valueA = BN(a.original.value)
   const valueB = BN(b.original.value)
   return valueA.minus(valueB).toNumber()
@@ -33,12 +24,17 @@ export const valuePerpSortingFn = (a: Row<AccountPerpRow>, b: Row<AccountPerpRow
 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 />
+    <DisplayCurrency
+      coin={coin}
+      className={classNames('text-xs text-right', color)}
+      showZero={!allowZero}
+    />
   )
 }

src/components/Account/AccountBalancesTable/Columns/useAccountBalancesColumns.tsx

@@ -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,
-  valueBalancesSortingFn,
-} from 'components/account/AccountBalancesTable/Columns/Value'
+  valueSortingFn,
+} from 'components/Account/AccountBalancesTable/Columns/Value'
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useStore from 'store'
@@ -41,7 +41,8 @@ export default function useAccountBalancesColumns(
             type={row.original.type}
           />
         ),
-        sortingFn: valueBalancesSortingFn,
+
+        sortingFn: valueSortingFn,
       },
       {
         ...SIZE_META,

src/components/Account/AccountBalancesTable/functions.ts

@@ -3,7 +3,7 @@ import { BNCoin } from 'types/classes/BNCoin'
 import { demagnify, getCoinValue } from 'utils/formatters'
 
 export function getAssetAccountBalanceRow(
-  type: 'deposit' | 'borrow' | 'lend',
+  type: 'deposits' | 'borrowing' | 'lending',
   asset: Asset,
   prices: BNCoin[],
   assets: Asset[],
@@ -57,9 +57,11 @@ export function getVaultAccountBalanceRow(
   }
 }
 
-export function getAmountChangeColor(type: PositionType, amount: BigNumber) {
-  if (type === 'perp') return ''
-  if (type === 'borrow') {
+export function getAmountChangeColor(
+  type: 'deposits' | 'borrowing' | 'lending' | 'vault',
+  amount: BigNumber,
+) {
+  if (type === 'borrowing') {
     if (amount.isGreaterThan(0)) return 'text-loss'
     if (amount.isLessThan(0)) return 'text-profit'
   }

src/components/Account/AccountBalancesTable/index.tsx

@@ -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/common/Button/ActionButton'
-import Card from 'components/common/Card'
-import Table from 'components/common/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/Button/ActionButton'
+import Card from 'components/Card'
+import Table from 'components/Table'
 import ConditionalWrapper from 'hocs/ConditionalWrapper'
-import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
+import useCurrentAccount from 'hooks/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}
-      type='balances'
+      isBalancesTable
     />
   )
 }

src/components/Account/AccountBalancesTable/useAccountBalanceData.tsx

@@ -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('deposit', asset, prices, assets, deposit, apy, prevDeposit),
+        getAssetAccountBalanceRow('deposits', 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('lend', asset, prices, assets, lending, apy, prevLending)
+      return getAssetAccountBalanceRow('lending', 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('borrow', asset, prices, assets, debt, apy, prevDebt)
+      return getAssetAccountBalanceRow('borrowing', asset, prices, assets, debt, apy, prevDebt)
     })
     return [...deposits, ...lends, ...vaults, ...debts]
   }, [

src/components/Account/AccountComposition.tsx

@@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { useMemo } from 'react'
 
-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 DisplayCurrency from 'components/DisplayCurrency'
+import { FormattedNumber } from 'components/FormattedNumber'
+import { ArrowRight } from 'components/Icons'
+import Text from 'components/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()
+  const { data } = useBorrowMarketAssetsTableData(false)
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()

src/components/Account/AccountCreateFirst.tsx

@@ -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/common/FullOverlayContent'
+import AccountFundFullPage from 'components/Account/AccountFund/AccountFundFullPage'
+import FullOverlayContent from 'components/FullOverlayContent'
 import WalletSelect from 'components/Wallet/WalletSelect'
 import useToggle from 'hooks/useToggle'
 import useStore from 'store'

src/components/Account/AccountDetails/AccountDetailsLeverage.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import { ArrowRight } from 'components/common/Icons'
+import { FormattedNumber } from 'components/FormattedNumber'
+import { ArrowRight } from 'components/Icons'
 
 interface Props {
   leverage: number

src/components/Account/AccountDetails/Skeleton.tsx

@@ -1,6 +1,6 @@
-import { HealthGauge } from 'components/account/Health/HealthGauge'
-import Loading from 'components/common/Loading'
-import Text from 'components/common/Text'
+import { HealthGauge } from 'components/Account/Health/HealthGauge'
+import Loading from 'components/Loading'
+import Text from 'components/Text'
 
 export default function Skeleton() {
   return (

src/components/Account/AccountDetails/index.tsx

@@ -2,31 +2,30 @@ 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 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 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 { 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 useHLSStakingAssets from 'hooks/useHLSStakingAssets'
+import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
+import useHLSStakingAssets from 'hooks/useHLSStakingAssets'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
 import usePrices from 'hooks/usePrices'
 import useStore from 'store'
@@ -92,7 +91,7 @@ function AccountDetails(props: Props) {
     return updatedLeverage
   }, [updatedAccount, prices, leverage, assets])
 
-  const data = useBorrowMarketAssetsTableData()
+  const { data } = useBorrowMarketAssetsTableData(false)
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
 
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
@@ -115,10 +114,7 @@ function AccountDetails(props: Props) {
       ),
     [account, assets, borrowAssetsData, hlsStrategies, lendingAssetsData, prices, updatedAccount],
   )
-  const isFullWidth =
-    location.pathname.includes('trade') ||
-    location.pathname === '/' ||
-    location.pathname.includes('perps')
+  const isFullWidth = location.pathname.includes('trade') || location.pathname === '/'
 
   function AccountDetailsHeader() {
     const onClose = useCallback(() => useStore.setState({ accountDetailsExpanded: false }), [])
@@ -219,12 +215,6 @@ 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>

src/components/Account/AccountFund/AccountFundContent.tsx

@@ -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/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 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 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'

src/components/Account/AccountFund/AccountFundFullPage.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
 
-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 AccountFundContent from 'components/Account/AccountFund/AccountFundContent'
+import Card from 'components/Card'
+import { CircularProgress } from 'components/CircularProgress'
+import FullOverlayContent from 'components/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() {

src/components/Account/AccountFund/AccountFundRow.tsx

@@ -1,4 +1,4 @@
-import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
+import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
 import useAsset from 'hooks/assets/useAsset'
 import { BNCoin } from 'types/classes/BNCoin'

src/components/Account/AccountList/AccountStats.tsx

@@ -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/common/Button'
-import { ArrowDownLine, ArrowUpLine, TrashBin } from 'components/common/Icons'
-import SwitchAutoLend from 'components/common/Switch/SwitchAutoLend'
+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 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()
+  const { data } = useBorrowMarketAssetsTableData(false)
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()

src/components/Account/AccountList/Skeleton.tsx

@@ -1,10 +1,10 @@
-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 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 { ORACLE_DENOM } from 'constants/oracle'
 import { BNCoin } from 'types/classes/BNCoin'
 

src/components/Account/AccountList/index.tsx

@@ -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/common/Card'
-import Radio from 'components/common/Radio'
-import Text from 'components/common/Text'
+import AccountStats from 'components/Account/AccountList/AccountStats'
+import Card from 'components/Card'
+import Radio from 'components/Radio'
+import Text from 'components/Text'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'

src/components/Account/AccountMenu.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react'
 
-import AccountMenuContent from 'components/account/AccountMenuContent'
-import Loading from 'components/common/Loading'
+import AccountMenuContent from 'components/Account/AccountMenuContent'
+import Loading from 'components/Loading'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useStore from 'store'
 

src/components/Account/AccountMenuContent.tsx

@@ -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/common/Button'
-import { Account, Plus, PlusCircled } from 'components/common/Icons'
-import Overlay from 'components/common/Overlay'
-import Text from 'components/common/Text'
+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 WalletBridges from 'components/Wallet/WalletBridges'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useBaseAsset from 'hooks/assets/useBasetAsset'

src/components/Account/AccountSummary.tsx

@@ -1,16 +1,15 @@
 import classNames from 'classnames'
 import { HTMLAttributes, useCallback, useMemo } from 'react'
 
-import AccountBalancesTable from 'components/account/AccountBalancesTable'
-import AccountComposition from 'components/account/AccountComposition'
-import AccountPerpPositionTable from 'components/account/AccountPerpPositionTable'
-import HealthBar from 'components/account/Health/HealthBar'
-import Accordion from 'components/common/Accordion'
-import Card from 'components/common/Card'
-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 Accordion from 'components/Accordion'
+import AccountBalancesTable from 'components/Account/AccountBalancesTable'
+import AccountComposition from 'components/Account/AccountComposition'
+import HealthBar from 'components/Account/Health/HealthBar'
+import Card from 'components/Card'
+import DisplayCurrency from 'components/DisplayCurrency'
+import { FormattedNumber } from 'components/FormattedNumber'
+import { ArrowRight } from 'components/Icons'
+import Text from 'components/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
@@ -38,7 +37,6 @@ export default function AccountSummary(props: Props) {
   const { data: prices } = usePrices()
   const assets = useAllAssets()
   const updatedAccount = useStore((s) => s.updatedAccount)
-  const chainConfig = useStore((s) => s.chainConfig)
   const accountBalance = useMemo(
     () =>
       props.account
@@ -46,7 +44,7 @@ export default function AccountSummary(props: Props) {
         : BN_ZERO,
     [props.account, updatedAccount, prices, assets],
   )
-  const data = useBorrowMarketAssetsTableData()
+  const { data } = useBorrowMarketAssetsTableData(false)
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()
@@ -77,56 +75,6 @@ export default function AccountSummary(props: Props) {
     [accountSummaryTabs, setAccountSummaryTabs],
   )
 
-  const items = useMemo(() => {
-    const itemsArray = [
-      {
-        title: `Credit Account ${props.account.id} Composition`,
-        renderContent: () =>
-          props.account ? <AccountComposition account={props.account} isHls={props.isHls} /> : null,
-        isOpen: accountSummaryTabs[0],
-        toggleOpen: (index: number) => handleToggle(index),
-        renderSubTitle: () => <></>,
-      },
-      {
-        title: 'Balances',
-        renderContent: () =>
-          props.account ? (
-            <AccountBalancesTable
-              account={props.account}
-              borrowingData={borrowAssetsData}
-              lendingData={lendingAssetsData}
-              hideCard
-              isHls={props.isHls}
-            />
-          ) : null,
-        isOpen: accountSummaryTabs[1],
-        toggleOpen: (index: number) => handleToggle(index),
-        renderSubTitle: () => <></>,
-      },
-    ]
-    if (chainConfig.perps)
-      itemsArray.push({
-        title: 'Perp Positions',
-        renderContent: () =>
-          props.account && props.account.perps.length > 0 ? (
-            <AccountPerpPositionTable account={props.account} hideCard />
-          ) : null,
-        isOpen: accountSummaryTabs[2] ?? false,
-        toggleOpen: (index: number) => handleToggle(index),
-        renderSubTitle: () => <></>,
-      })
-
-    return itemsArray
-  }, [
-    props.account,
-    borrowAssetsData,
-    lendingAssetsData,
-    props.isHls,
-    chainConfig.perps,
-    handleToggle,
-    accountSummaryTabs,
-  ])
-
   if (!props.account) return null
   return (
     <div className='h-[546px] max-w-screen overflow-y-scroll scrollbar-hide w-93.5'>
@@ -174,7 +122,37 @@ export default function AccountSummary(props: Props) {
           />
         </Item>
       </Card>
-      <Accordion items={items} allowMultipleOpen />
+      <Accordion
+        items={[
+          {
+            title: `Credit Account ${props.account.id} Composition`,
+            renderContent: () =>
+              props.account ? (
+                <AccountComposition account={props.account} isHls={props.isHls} />
+              ) : null,
+            isOpen: accountSummaryTabs[0],
+            toggleOpen: (index: number) => handleToggle(index),
+            renderSubTitle: () => <></>,
+          },
+          {
+            title: 'Balances',
+            renderContent: () =>
+              props.account ? (
+                <AccountBalancesTable
+                  account={props.account}
+                  borrowingData={borrowAssetsData}
+                  lendingData={lendingAssetsData}
+                  hideCard
+                  isHls={props.isHls}
+                />
+              ) : null,
+            isOpen: accountSummaryTabs[1],
+            toggleOpen: (index: number) => handleToggle(index),
+            renderSubTitle: () => <></>,
+          },
+        ]}
+        allowMultipleOpen
+      />
     </div>
   )
 }

src/components/Account/CurrentAccountSummary.tsx

@@ -1,5 +1,5 @@
-import AccountSummary from 'components/account/AccountSummary'
-import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
+import AccountSummary from 'components/Account/AccountSummary'
+import useCurrentAccount from 'hooks/useCurrentAccount'
 
 function CurrentAccountSummary() {
   const account = useCurrentAccount()

src/components/Account/Health/HealthBar.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
 import { useMemo } from 'react'
 
-import HealthIcon from 'components/account/Health/HealthIcon'
-import HealthTooltip from 'components/account/Health/HealthTooltip'
+import HealthIcon from 'components/Account/Health/HealthIcon'
+import HealthTooltip from 'components/Account/Health/HealthTooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'

src/components/Account/Health/HealthGauge.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
 import { useMemo } from 'react'
 
-import HealthIcon from 'components/account/Health/HealthIcon'
-import HealthTooltip from 'components/account/Health/HealthTooltip'
+import HealthIcon from 'components/Account/Health/HealthIcon'
+import HealthTooltip from 'components/Account/Health/HealthTooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'

src/components/Account/Health/HealthIcon.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-import { ExclamationMarkCircled, Heart } from 'components/common/Icons'
+import { ExclamationMarkCircled, Heart } from 'components/Icons'
 
 interface Props {
   isLoading: boolean

src/components/Account/Health/HealthTooltip.tsx

@@ -1,8 +1,8 @@
 import { ReactElement, useMemo } from 'react'
 
-import { CircularProgress } from 'components/common/CircularProgress'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
+import { CircularProgress } from 'components/CircularProgress'
+import Text from 'components/Text'
+import { Tooltip } from 'components/Tooltip'
 import { BN } from 'utils/helpers'
 
 interface Props {

src/components/Account/RiskChart.tsx

@@ -9,8 +9,8 @@ import {
   YAxis,
 } from 'recharts'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import Text from 'components/common/Text'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Text from 'components/Text'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'

src/components/AmountAndValue.tsx

@@ -1,5 +1,5 @@
-import DisplayCurrency from 'components/common/DisplayCurrency'
-import { FormattedNumber } from 'components/common/FormattedNumber'
+import DisplayCurrency from 'components/DisplayCurrency'
+import { FormattedNumber } from 'components/FormattedNumber'
 import { MAX_AMOUNT_DECIMALS, MIN_AMOUNT } from 'constants/math'
 import { BNCoin } from 'types/classes/BNCoin'
 import { demagnify } from 'utils/formatters'

src/components/Asset/AssetAmount.tsx

@@ -1,4 +1,4 @@
-import { FormattedNumber } from 'components/common/FormattedNumber'
+import { FormattedNumber } from 'components/FormattedNumber'
 
 type Props = {
   asset: Asset

src/components/Asset/AssetBalanceRow.tsx

@@ -1,7 +1,7 @@
-import AssetImage from 'components/common/assets/AssetImage'
-import DisplayCurrency from 'components/common/DisplayCurrency'
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import Text from 'components/common/Text'
+import AssetImage from 'components/Asset/AssetImage'
+import DisplayCurrency from 'components/DisplayCurrency'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Text from 'components/Text'
 import { BNCoin } from 'types/classes/BNCoin'
 import { demagnify } from 'utils/formatters'
 

src/components/Asset/AssetRate.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import { InfoCircle } from 'components/common/Icons'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
+import { FormattedNumber } from 'components/FormattedNumber'
+import { InfoCircle } from 'components/Icons'
+import Text from 'components/Text'
+import { Tooltip } from 'components/Tooltip'
 
 interface Props {
   rate: number

src/components/Asset/AssetSymbol.tsx

@@ -1,4 +1,4 @@
-import Text from 'components/common/Text'
+import Text from 'components/Text'
 
 interface Props {
   symbol: string

src/components/AvailableLiquidityMessage.tsx

@@ -1,5 +1,5 @@
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import Text from 'components/common/Text'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Text from 'components/Text'
 
 interface Props {
   availableLiquidity: BigNumber

src/components/Borrow/BorrowActionButtons.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
-import Button from 'components/common/Button'
-import ActionButton from 'components/common/Button/ActionButton'
-import { HandCoins, Plus } from 'components/common/Icons'
+import Button from 'components/Button'
+import ActionButton from 'components/Button/ActionButton'
+import { HandCoins, Plus } from 'components/Icons'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
 import useStore from 'store'
 

src/components/Borrow/BorrowIntro.tsx

@@ -1,4 +1,4 @@
-import Intro from 'components/common/Intro'
+import Intro from 'components/Intro'
 
 export default function BorrowIntro() {
   return (

src/components/Borrow/Borrowings.tsx

@@ -1,11 +1,11 @@
-import AvailableBorrowingsTable from 'components/borrow/Table/AvailableBorrowingsTable'
-import DepositedBorrowingsTable from 'components/borrow/Table/DepositedBorrowingsTable'
+import AvailableBorrowingsTable from 'components/Borrow/Table/AvailableBorrowingsTable'
+import DepositedBorrowingsTable from 'components/Borrow/Table/DepositedBorrowingsTable'
 import { BN_ZERO } from 'constants/math'
 import useBorrowEnabledAssets from 'hooks/assets/useBorrowEnabledAssets'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
 
 export default function Borrowings() {
-  const data = useBorrowMarketAssetsTableData()
+  const { data } = useBorrowMarketAssetsTableData()
 
   if (!data?.allAssets?.length) {
     return <Fallback />

src/components/Borrow/Table/AvailableBorrowingsTable.tsx

@@ -2,12 +2,12 @@ import { Row } from '@tanstack/react-table'
 import { Table as TanstackTable } from '@tanstack/table-core/build/lib/types'
 import { useCallback } from 'react'
 
-import BorrowActionButtons from 'components/borrow/BorrowActionButtons'
-import { NAME_META } from 'components/borrow/Table/Columns/Name'
-import useAvailableColumns from 'components/borrow/Table/Columns/useAvailableColumns'
-import MarketDetails from 'components/common/MarketDetails'
-import Table from 'components/common/Table'
-import ActionButtonRow from 'components/common/Table/ActionButtonRow'
+import BorrowActionButtons from 'components/Borrow/BorrowActionButtons'
+import { NAME_META } from 'components/Borrow/Table/Columns/Name'
+import useAvailableColumns from 'components/Borrow/Table/Columns/useAvailableColumns'
+import MarketDetails from 'components/MarketDetails'
+import Table from 'components/Table'
+import ActionButtonRow from 'components/Table/ActionButtonRow'
 
 type Props = {
   data: BorrowMarketTableData[]

src/components/Borrow/Table/Columns/BorrowRate.tsx

@@ -1,5 +1,5 @@
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import Loading from 'components/common/Loading'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Loading from 'components/Loading'
 
 export const BORROW_RATE_META = {
   accessorKey: 'borrowRate',

src/components/Borrow/Table/Columns/Debt.tsx

@@ -1,6 +1,6 @@
 import { Row } from '@tanstack/react-table'
 
-import AmountAndValue from 'components/common/AmountAndValue'
+import AmountAndValue from 'components/AmountAndValue'
 import { BN_ZERO } from 'constants/math'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
 import { byDenom } from 'utils/array'

src/components/Borrow/Table/Columns/Liquidity.tsx

@@ -1,7 +1,7 @@
 import { Row } from '@tanstack/react-table'
 
-import AmountAndValue from 'components/common/AmountAndValue'
-import Loading from 'components/common/Loading'
+import AmountAndValue from 'components/AmountAndValue'
+import Loading from 'components/Loading'
 import { BN_ZERO } from 'constants/math'
 import useAsset from 'hooks/assets/useAsset'
 import { demagnify } from 'utils/formatters'

src/components/Borrow/Table/Columns/Manage.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronUp } from 'components/common/Icons'
+import { ChevronDown, ChevronUp } from 'components/Icons'
 
 export const MANAGE_META = {
   accessorKey: 'manage',

src/components/Borrow/Table/Columns/Name.tsx

@@ -1,5 +1,5 @@
-import AssetImage from 'components/common/assets/AssetImage'
-import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import AssetImage from 'components/Asset/AssetImage'
+import TitleAndSubCell from 'components/TitleAndSubCell'
 
 export const NAME_META = { accessorKey: 'asset.symbol', header: 'Asset', id: 'symbol' }
 

src/components/Borrow/Table/Columns/useAvailableColumns.tsx

@@ -1,13 +1,13 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import BorrowRate, { BORROW_RATE_META } from 'components/borrow/Table/Columns/BorrowRate'
+import BorrowRate, { BORROW_RATE_META } from 'components/Borrow/Table/Columns/BorrowRate'
 import Liquidity, {
   LIQUIDITY_META,
   liquiditySortingFn,
-} from 'components/borrow/Table/Columns/Liquidity'
-import Manage, { MANAGE_META } from 'components/borrow/Table/Columns/Manage'
-import Name, { NAME_META } from 'components/borrow/Table/Columns/Name'
+} from 'components/Borrow/Table/Columns/Liquidity'
+import Manage, { MANAGE_META } from 'components/Borrow/Table/Columns/Manage'
+import Name, { NAME_META } from 'components/Borrow/Table/Columns/Name'
 
 export default function useAvailableColumns() {
   return useMemo<ColumnDef<BorrowMarketTableData>[]>(() => {

src/components/Borrow/Table/Columns/useDepositedColumns.tsx

@@ -1,14 +1,14 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import BorrowRate, { BORROW_RATE_META } from 'components/borrow/Table/Columns/BorrowRate'
-import Debt, { DEBT_META, debtSortingFn } from 'components/borrow/Table/Columns/Debt'
+import BorrowRate, { BORROW_RATE_META } from 'components/Borrow/Table/Columns/BorrowRate'
+import Debt, { DEBT_META, debtSortingFn } from 'components/Borrow/Table/Columns/Debt'
 import Liquidity, {
   LIQUIDITY_META,
   liquiditySortingFn,
-} from 'components/borrow/Table/Columns/Liquidity'
-import Manage, { MANAGE_META } from 'components/borrow/Table/Columns/Manage'
-import Name, { NAME_META } from 'components/borrow/Table/Columns/Name'
+} from 'components/Borrow/Table/Columns/Liquidity'
+import Manage, { MANAGE_META } from 'components/Borrow/Table/Columns/Manage'
+import Name, { NAME_META } from 'components/Borrow/Table/Columns/Name'
 
 export default function useDepositedColumns() {
   return useMemo<ColumnDef<BorrowMarketTableData>[]>(() => {

src/components/Borrow/Table/DepositedBorrowingsTable.tsx

@@ -1,12 +1,12 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import BorrowActionButtons from 'components/borrow/BorrowActionButtons'
-import { NAME_META } from 'components/borrow/Table/Columns/Name'
-import useDepositedColumns from 'components/borrow/Table/Columns/useDepositedColumns'
-import MarketDetails from 'components/common/MarketDetails'
-import Table from 'components/common/Table'
-import ActionButtonRow from 'components/common/Table/ActionButtonRow'
+import BorrowActionButtons from 'components/Borrow/BorrowActionButtons'
+import { NAME_META } from 'components/Borrow/Table/Columns/Name'
+import useDepositedColumns from 'components/Borrow/Table/Columns/useDepositedColumns'
+import MarketDetails from 'components/MarketDetails'
+import Table from 'components/Table'
+import ActionButtonRow from 'components/Table/ActionButtonRow'
 
 type Props = {
   data: BorrowMarketTableData[]

src/components/BorrowCapacity.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Text from 'components/Text'
+import { Tooltip } from 'components/Tooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'

src/components/Button/ActionButton.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from 'react'
 
-import AccountCreateFirst from 'components/account/AccountCreateFirst'
-import { ACCOUNT_MENU_BUTTON_ID } from 'components/account/AccountMenuContent'
-import Button from 'components/common/Button/index'
-import { Account, PlusCircled } from 'components/common/Icons'
+import AccountCreateFirst from 'components/Account/AccountCreateFirst'
+import { ACCOUNT_MENU_BUTTON_ID } from 'components/Account/AccountMenuContent'
+import Button from 'components/Button'
+import { Account, PlusCircled } from 'components/Icons'
 import WalletConnectButton from 'components/Wallet/WalletConnectButton'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useAccountId from 'hooks/useAccountId'

src/components/Button/DropDownButton.tsx

@@ -1,7 +1,7 @@
-import Button from 'components/common/Button/index'
-import { ChevronDown } from 'components/common/Icons'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
+import Button from 'components/Button'
+import { ChevronDown } from 'components/Icons'
+import Text from 'components/Text'
+import { Tooltip } from 'components/Tooltip'
 import useToggle from 'hooks/useToggle'
 
 interface Props extends ButtonProps {

src/components/Button/EscButton.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react'
 
-import Button from 'components/common/Button/index'
-import { Cross } from 'components/common/Icons'
+import Button from 'components/Button'
+import { Cross } from 'components/Icons'
 
 interface Props {
   enableKeyPress?: boolean

src/components/Button/index.tsx

@@ -12,10 +12,10 @@ import {
   buttonVariantClasses,
   circularProgressSize,
   focusClasses,
-} from 'components/common/Button/constants'
-import { glowElement } from 'components/common/Button/utils'
-import { CircularProgress } from 'components/common/CircularProgress'
-import { ChevronDown } from 'components/common/Icons'
+} from 'components/Button/constants'
+import { glowElement } from 'components/Button/utils'
+import { CircularProgress } from 'components/CircularProgress'
+import { ChevronDown } from 'components/Icons'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'

src/components/Card.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { ReactElement, ReactNode } from 'react'
 
-import Text from 'components/common/Text'
+import Text from 'components/Text'
 
 interface Props {
   children: ReactNode

src/components/Chain/ChainLogo.tsx

@@ -1,4 +1,4 @@
-import { Neutron, Osmo } from 'components/common/Icons'
+import { Neutron, Osmo } from 'components/Icons'
 import { ChainInfoID } from 'types/enums/wallet'
 
 interface Props {
@@ -11,7 +11,6 @@ export default function ChainLogo(props: Props) {
 
   switch (chainID) {
     case ChainInfoID.Pion1:
-    case ChainInfoID.Neutron1:
       return <Neutron className={className} />
 
     default:

src/components/CheckMark.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-import { CheckCircled } from 'components/common/Icons'
+import { CheckCircled } from 'components/Icons'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'

src/components/Checkbox.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 
-import { Check } from 'components/common/Icons'
-import Text from 'components/common/Text'
+import { Check } from 'components/Icons'
+import Text from 'components/Text'
 
 interface Props {
   checked: boolean

src/components/DepositCapCell.tsx

@@ -1,7 +1,5 @@
-import classNames from 'classnames'
-
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import { FormattedNumber } from 'components/FormattedNumber'
+import TitleAndSubCell from 'components/TitleAndSubCell'
 import { VAULT_DEPOSIT_BUFFER } from 'constants/vaults'
 import useAsset from 'hooks/assets/useAsset'
 
@@ -31,10 +29,7 @@ export default function DepositCapCell(props: Props) {
         <FormattedNumber
           amount={depositCapUsed}
           options={{ minDecimals: 2, maxDecimals: 2, suffix: '% Filled' }}
-          className={classNames(
-            'text-xs',
-            depositCapUsed >= 100 ? 'text-loss/60' : depositCapUsed > 90 ? 'text-info/60' : '',
-          )}
+          className='text-xs'
           animate
         />
       }

src/components/DepositCapMessage.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames'
 import { HTMLAttributes } from 'react'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import { InfoCircle } from 'components/common/Icons'
-import Text from 'components/common/Text'
+import { FormattedNumber } from 'components/FormattedNumber'
+import { InfoCircle } from 'components/Icons'
+import Text from 'components/Text'
 import useAsset from 'hooks/assets/useAsset'
 import { BNCoin } from 'types/classes/BNCoin'
 
@@ -46,7 +46,6 @@ function AmountMessage(props: AmountMessageProps) {
         amount={Math.max(0, props.coin.amount.toNumber())}
         options={{
           decimals: asset.decimals,
-          maxDecimals: asset.decimals,
           suffix: ` ${asset.symbol}`,
         }}
         className='text-xs text-white/60'

src/components/DisplayCurrency.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { useMemo } from 'react'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
+import { FormattedNumber } from 'components/FormattedNumber'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useDisplayCurrencyAssets from 'hooks/assets/useDisplayCurrencyAssets'
@@ -22,7 +22,6 @@ interface Props {
 }
 
 export default function DisplayCurrency(props: Props) {
-  const { coin, className, isApproximation, parentheses, showZero, options, isProfitOrLoss } = props
   const displayCurrencies = useDisplayCurrencyAssets()
   const assets = useAllAssets()
   const [displayCurrency] = useDisplayCurrency()
@@ -37,7 +36,7 @@ export default function DisplayCurrency(props: Props) {
   const isUSD = displayCurrencyAsset.id === 'USD'
 
   const [amount, absoluteAmount] = useMemo(() => {
-    const coinValue = getCoinValue(coin, prices, assets)
+    const coinValue = getCoinValue(props.coin, prices, assets)
 
     if (displayCurrency === ORACLE_DENOM) return [coinValue.toNumber(), coinValue.abs().toNumber()]
 
@@ -51,29 +50,16 @@ export default function DisplayCurrency(props: Props) {
     const amount = coinValue.div(displayPrice).toNumber()
 
     return [amount, Math.abs(amount)]
-  }, [assets, displayCurrency, displayCurrencyAsset.decimals, prices, coin])
+  }, [assets, displayCurrency, displayCurrencyAsset.decimals, prices, props.coin])
 
-  const isLessThanACent = useMemo(
-    () => isUSD && absoluteAmount < 0.01 && absoluteAmount > 0,
-    [absoluteAmount, isUSD],
-  )
-
-  const prefix = useMemo(() => {
-    const positiveOrNegativePrefix = isProfitOrLoss
-      ? amount > 0
-        ? '+'
-        : amount < 0
-        ? '-'
-        : ''
-      : ''
-    const approximationPrefix = isApproximation ? '~ ' : ''
-    const smallerThanPrefix = isLessThanACent && !showZero ? '< ' : ''
-
-    return isUSD
-      ? `${approximationPrefix}${smallerThanPrefix}${positiveOrNegativePrefix}$`
-      : `${approximationPrefix}${smallerThanPrefix}${positiveOrNegativePrefix}`
-  }, [isUSD, isApproximation, showZero, isProfitOrLoss, amount, isLessThanACent])
+  const isLessThanACent =
+    (isUSD && absoluteAmount < 0.01 && absoluteAmount > 0) ||
+    (absoluteAmount === 0 && props.showZero)
+  const smallerThanPrefix = isLessThanACent ? '< ' : ''
 
+  const prefix = isUSD
+    ? `${props.isApproximation ? '~ ' : smallerThanPrefix}$`
+    : `${props.isApproximation ? '~ ' : ''}`
   const suffix = isUSD
     ? ''
     : ` ${displayCurrencyAsset.symbol ? ` ${displayCurrencyAsset.symbol}` : ''}`
@@ -81,19 +67,19 @@ export default function DisplayCurrency(props: Props) {
   return (
     <FormattedNumber
       className={classNames(
-        className,
-        parentheses && 'before:content-["("] after:content-[")"]',
-        isProfitOrLoss && amount < 0 && 'text-loss',
-        isProfitOrLoss && amount > 0 && 'text-profit',
+        props.className,
+        props.parentheses && 'before:content-["("] after:content-[")"]',
+        props.isProfitOrLoss && (amount < 0 ? 'text-error' : amount === 0 ? '' : 'text-success'),
+        props.isProfitOrLoss && amount < 0 && 'before:content-["-"]',
       )}
       amount={isLessThanACent ? 0.01 : absoluteAmount}
       options={{
         minDecimals: isUSD ? 2 : 0,
         maxDecimals: 2,
         abbreviated: true,
-        suffix,
-        ...options,
         prefix,
+        suffix,
+        ...props.options,
       }}
       animate
     />

src/components/DocsLink.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
 
-import { ExternalLink } from 'components/common/Icons'
-import Text from 'components/common/Text'
-import { TextLink } from 'components/common/TextLink'
+import { ExternalLink } from 'components/Icons'
+import Text from 'components/Text'
+import { TextLink } from 'components/TextLink'
 import { DocURL } from 'types/enums/docURL'
 
 interface Props {

src/components/DoubleLogo.tsx

@@ -1,6 +1,4 @@
-import classNames from 'classnames'
-
-import AssetImage from 'components/common/assets/AssetImage'
+import AssetImage from 'components/Asset/AssetImage'
 import useAsset from 'hooks/assets/useAsset'
 
 interface Props {
@@ -20,7 +18,7 @@ export default function DoubleLogo(props: Props) {
         <AssetImage asset={primaryAsset} size={24} />
       </div>
       <div className='absolute'>
-        <AssetImage asset={secondaryAsset} size={16} className='mt-5 ml-5' />
+        <AssetImage asset={secondaryAsset} size={16} className='ml-5 mt-5' />
       </div>
     </div>
   )

src/components/Earn/Farm/FarmIntro.tsx

@@ -1,6 +1,6 @@
-import Button from 'components/common/Button'
-import { PlusSquared } from 'components/common/Icons'
-import Intro from 'components/common/Intro'
+import Button from 'components/Button'
+import { PlusSquared } from 'components/Icons'
+import Intro from 'components/Intro'
 import { DocURL } from 'types/enums/docURL'
 
 export default function FarmIntro() {

src/components/Earn/Farm/Table/AvailableVaultsTable.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import useAvailableColumns from 'components/earn/farm/Table/Columns/useAvailableColumns'
-import Table from 'components/common/Table'
+import useAvailableColumns from 'components/Earn/Farm/Table/Columns/useAvailableColumns'
+import Table from 'components/Table'
 
 type Props = {
   data: Vault[]

src/components/Earn/Farm/Table/Columns/Apy.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import Loading from 'components/common/Loading'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Loading from 'components/Loading'
 
 export const APY_META = { accessorKey: 'apy', header: 'APY' }
 

src/components/Earn/Farm/Table/Columns/Deposit.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ActionButton from 'components/common/Button/ActionButton'
-import Loading from 'components/common/Loading'
+import ActionButton from 'components/Button/ActionButton'
+import Loading from 'components/Loading'
 import useStore from 'store'
 
 interface Props {

src/components/Earn/Farm/Table/Columns/DepositCap.tsx

@@ -1,7 +1,7 @@
 import { Row } from '@tanstack/react-table'
 
-import DepositCapCell from 'components/common/DepositCapCell'
-import Loading from 'components/common/Loading'
+import DepositCapCell from 'components/DepositCapCell'
+import Loading from 'components/Loading'
 
 export const DEPOSIT_CAP_META = { accessorKey: 'cap', header: 'Deposit Cap' }
 

src/components/Earn/Farm/Table/Columns/Details.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import { ChevronDown } from 'components/common/Icons'
-import Loading from 'components/common/Loading'
+import { ChevronDown } from 'components/Icons'
+import Loading from 'components/Loading'
 
 export const DETAILS_META = { accessorKey: 'details', enableSorting: false, header: 'Deposit' }
 

src/components/Earn/Farm/Table/Columns/MaxLTV.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import Loading from 'components/common/Loading'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Loading from 'components/Loading'
 
 export const LTV_MAX_META = { accessorKey: 'ltv.max', header: 'Max LTV' }
 

src/components/Earn/Farm/Table/Columns/Name.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import DoubleLogo from 'components/common/DoubleLogo'
-import Text from 'components/common/Text'
-import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import DoubleLogo from 'components/DoubleLogo'
+import Text from 'components/Text'
+import TitleAndSubCell from 'components/TitleAndSubCell'
 import { VaultStatus } from 'types/enums/vault'
 import { produceCountdown } from 'utils/formatters'
 

src/components/Earn/Farm/Table/Columns/PositionValue.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import DisplayCurrency from 'components/common/DisplayCurrency'
+import DisplayCurrency from 'components/DisplayCurrency'
 import { ORACLE_DENOM } from 'constants/oracle'
 import { BNCoin } from 'types/classes/BNCoin'
 

src/components/Earn/Farm/Table/Columns/TVL.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import DisplayCurrency from 'components/common/DisplayCurrency'
-import Loading from 'components/common/Loading'
+import DisplayCurrency from 'components/DisplayCurrency'
+import Loading from 'components/Loading'
 import { BNCoin } from 'types/classes/BNCoin'
 
 export const TVL_META = { accessorKey: 'tvl', header: 'TVL' }

src/components/Earn/Farm/Table/Columns/useAvailableColumns.tsx

@@ -1,16 +1,16 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import Apy, { APY_META } from 'components/earn/farm/Table/Columns/Apy'
-import { Deposit } from 'components/earn/farm/Table/Columns/Deposit'
+import Apy, { APY_META } from 'components/Earn/Farm/Table/Columns/Apy'
+import { Deposit } from 'components/Earn/Farm/Table/Columns/Deposit'
 import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
-} from 'components/earn/farm/Table/Columns/DepositCap'
-import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
-import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
-import TVL, { TVL_META } from 'components/earn/farm/Table/Columns/TVL'
-import { DETAILS_META } from 'components/earn/farm/Table/Columns/Details'
+} from 'components/Earn/Farm/Table/Columns/DepositCap'
+import MaxLTV, { LTV_MAX_META } from 'components/Earn/Farm/Table/Columns/MaxLTV'
+import Name, { NAME_META } from 'components/Earn/Farm/Table/Columns/Name'
+import TVL, { TVL_META } from 'components/Earn/Farm/Table/Columns/TVL'
+import { DETAILS_META } from 'components/Earn/Farm/Table/Columns/Details'
 
 interface Props {
   isLoading: boolean

src/components/Earn/Farm/Table/Columns/useDepositedColumns.tsx

@@ -1,18 +1,18 @@
 import { ColumnDef, Row } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import Apy, { APY_META } from 'components/earn/farm/Table/Columns/Apy'
+import Apy, { APY_META } from 'components/Earn/Farm/Table/Columns/Apy'
 import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
-} from 'components/earn/farm/Table/Columns/DepositCap'
-import Details, { DETAILS_META } from 'components/earn/farm/Table/Columns/Details'
-import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
-import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
+} from 'components/Earn/Farm/Table/Columns/DepositCap'
+import Details, { DETAILS_META } from 'components/Earn/Farm/Table/Columns/Details'
+import MaxLTV, { LTV_MAX_META } from 'components/Earn/Farm/Table/Columns/MaxLTV'
+import Name, { NAME_META } from 'components/Earn/Farm/Table/Columns/Name'
 import PositionValue, {
   POSITION_VALUE_META,
-} from 'components/earn/farm/Table/Columns/PositionValue'
-import TVL, { TVL_META } from 'components/earn/farm/Table/Columns/TVL'
+} from 'components/Earn/Farm/Table/Columns/PositionValue'
+import TVL, { TVL_META } from 'components/Earn/Farm/Table/Columns/TVL'
 
 interface Props {
   isLoading: boolean

src/components/Earn/Farm/Table/DepositedVaultsTable.tsx

@@ -2,9 +2,9 @@ import { Row } from '@tanstack/react-table'
 import { Table as TanStackTable } from '@tanstack/table-core/build/lib/types'
 import React, { useCallback } from 'react'
 
-import useDepositedColumns from 'components/earn/farm/Table/Columns/useDepositedColumns'
-import VaultExpanded from 'components/earn/farm/VaultExpanded'
-import Table from 'components/common/Table'
+import useDepositedColumns from 'components/Earn/Farm/Table/Columns/useDepositedColumns'
+import VaultExpanded from 'components/Earn/Farm/VaultExpanded'
+import Table from 'components/Table'
 
 type Props = {
   data: DepositedVault[]

src/components/Earn/Farm/VaultExpanded.tsx

@@ -2,9 +2,9 @@ import { Row } from '@tanstack/react-table'
 import moment from 'moment'
 import { useState } from 'react'
 
-import Button from 'components/common/Button'
-import { AccountArrowDown, LockLocked, LockUnlocked, Plus } from 'components/common/Icons'
-import { Tooltip } from 'components/common/Tooltip'
+import Button from 'components/Button'
+import { AccountArrowDown, LockLocked, LockUnlocked, Plus } from 'components/Icons'
+import { Tooltip } from 'components/Tooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'

src/components/Earn/Farm/VaultUnlockBanner.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 
-import Button from 'components/common/Button'
-import { ChevronRight } from 'components/common/Icons'
-import NotificationBanner from 'components/common/NotificationBanner'
+import Button from 'components/Button'
+import { ChevronRight } from 'components/Icons'
+import NotificationBanner from 'components/NotificationBanner'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'

src/components/Earn/Farm/Vaults.tsx

@@ -1,8 +1,8 @@
 import { Suspense, useMemo } from 'react'
 
-import AvailableVaultsTable from 'components/earn/farm/Table/AvailableVaultsTable'
-import DepositedVaultsTable from 'components/earn/farm/Table/DepositedVaultsTable'
-import VaultUnlockBanner from 'components/earn/farm/VaultUnlockBanner'
+import AvailableVaultsTable from 'components/Earn/Farm/Table/AvailableVaultsTable'
+import DepositedVaultsTable from 'components/Earn/Farm/Table/DepositedVaultsTable'
+import VaultUnlockBanner from 'components/Earn/Farm/VaultUnlockBanner'
 import { BN_ZERO } from 'constants/math'
 import useAccountId from 'hooks/useAccountId'
 import useDepositedVaults from 'hooks/useDepositedVaults'

src/components/Earn/Lend/LendIntro.tsx

@@ -1,6 +1,6 @@
-import ActionButton from 'components/common/Button/ActionButton'
-import { ArrowUpLine } from 'components/common/Icons'
-import Intro from 'components/common/Intro'
+import ActionButton from 'components/Button/ActionButton'
+import { ArrowUpLine } from 'components/Icons'
+import Intro from 'components/Intro'
 import useStore from 'store'
 
 export default function LendIntro() {

src/components/Earn/Lend/LendingActionButtons.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react'
 
-import { ACCOUNT_MENU_BUTTON_ID } from 'components/account/AccountMenuContent'
-import Button from 'components/common/Button'
-import ActionButton from 'components/common/Button/ActionButton'
-import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/common/Icons'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
+import { ACCOUNT_MENU_BUTTON_ID } from 'components/Account/AccountMenuContent'
+import Button from 'components/Button'
+import ActionButton from 'components/Button/ActionButton'
+import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/Icons'
+import Text from 'components/Text'
+import { Tooltip } from 'components/Tooltip'
 import ConditionalWrapper from 'hocs/ConditionalWrapper'
 import useAccountId from 'hooks/useAccountId'
 import useAlertDialog from 'hooks/useAlertDialog'

src/components/Earn/Lend/Lends.tsx

@@ -1,5 +1,5 @@
-import AvailableLendsTable from 'components/earn/lend/Table/AvailableLendsTable'
-import DepositedLendsTable from 'components/earn/lend/Table/DepositedLendsTable'
+import AvailableLendsTable from 'components/Earn/Lend/Table/AvailableLendsTable'
+import DepositedLendsTable from 'components/Earn/Lend/Table/DepositedLendsTable'
 import { BN_ZERO } from 'constants/math'
 import useLendEnabledAssets from 'hooks/assets/useLendEnabledAssets'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'

src/components/Earn/Lend/Table/AvailableLendsTable.tsx

@@ -1,12 +1,12 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import LendingActionButtons from 'components/earn/lend/LendingActionButtons'
-import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
-import useAvailableColumns from 'components/earn/lend/Table/Columns/useAvailableColumns'
-import MarketDetails from 'components/common/MarketDetails'
-import Table from 'components/common/Table'
-import ActionButtonRow from 'components/common/Table/ActionButtonRow'
+import LendingActionButtons from 'components/Earn/Lend/LendingActionButtons'
+import { NAME_META } from 'components/Earn/Lend/Table/Columns/Name'
+import useAvailableColumns from 'components/Earn/Lend/Table/Columns/useAvailableColumns'
+import MarketDetails from 'components/MarketDetails'
+import Table from 'components/Table'
+import ActionButtonRow from 'components/Table/ActionButtonRow'
 
 type Props = {
   data: LendingMarketTableData[]

src/components/Earn/Lend/Table/Columns/Apy.tsx

@@ -1,5 +1,5 @@
-import AssetRate from 'components/common/assets/AssetRate'
-import Loading from 'components/common/Loading'
+import AssetRate from 'components/Asset/AssetRate'
+import Loading from 'components/Loading'
 
 export const APY_META = { accessorKey: 'apy.deposit', header: 'APY', meta: { className: 'w-40' } }