feat: implemented wallet-mode

src/components/account/AccountComposition.tsx

@@ -7,7 +7,7 @@ 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 useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import { BN_ZERO, MAX_AMOUNT_DECIMALS } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAllAssets from 'hooks/assets/useAllAssets'

src/components/account/AccountDetails/index.tsx

@@ -12,18 +12,19 @@ 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 useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { ORACLE_DENOM } from 'constants/oracle'
+import useAccount from 'hooks/accounts/useAccount'
 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 useHealthComputer from 'hooks/useHealthComputer'
 import useHLSStakingAssets from 'hooks/useHLSStakingAssets'
+import useHealthComputer from 'hooks/useHealthComputer'
 import usePrices from 'hooks/usePrices'
 import useVaultAprs from 'hooks/vaults/useVaultAprs'
 import useStore from 'store'
@@ -33,6 +34,7 @@ import {
   calculateAccountBalanceValue,
   calculateAccountLeverage,
 } from 'utils/accounts'
+import { getPage } from 'utils/route'
 
 export default function AccountDetailsController() {
   const address = useStore((s) => s.address)
@@ -40,28 +42,32 @@ export default function AccountDetailsController() {
   const isV1 = useStore((s) => s.isV1)
   const { data: _, isLoading } = useAccounts('default', address)
   const { data: accountIds } = useAccountIds(address, false, true)
-
   const accountId = useAccountId()
+  const currentAccount = useCurrentAccount()
+  const { data: v1Account } = useAccount(address)
+  const { pathname } = useLocation()
+  const page = getPage(pathname)
 
-  const account = useCurrentAccount()
+  const account = isV1 && page !== 'trade' ? v1Account : currentAccount
   const focusComponent = useStore((s) => s.focusComponent)
   const isOwnAccount = accountId && accountIds?.includes(accountId)
-  const hideAccountDetails = !address || focusComponent || !isOwnAccount || isHLS || isV1
+  const hideAccountDetails =
+    !address || focusComponent || !isOwnAccount || isHLS || page.includes('portfolio')
   const isLoadingAccountDetails = (isLoading && accountId && !focusComponent) || !account
 
   if (hideAccountDetails) return null
   if (isLoadingAccountDetails) return <Skeleton />
 
-  return <AccountDetails account={account} />
+  return <AccountDetails account={account} page={page} />
 }
 
 interface Props {
   account: Account
+  page: Page
 }
 
 function AccountDetails(props: Props) {
-  const { account } = props
+  const { account, page } = props
-  const location = useLocation()
   const { data: hlsStrategies } = useHLSStakingAssets()
   const { data: vaultAprs } = useVaultAprs()
   const [reduceMotion] = useLocalStorage<boolean>(
@@ -126,10 +132,7 @@ function AccountDetails(props: Props) {
       vaultAprs,
     ],
   )
-  const isFullWidth =
+  const isFullWidth = page === 'trade' || page === 'perps'
-    location.pathname.includes('trade') ||
-    location.pathname === '/' ||
-    location.pathname.includes('perps')
 
   return (
     <>

src/components/account/AccountList/AccountStats.tsx

@@ -6,7 +6,7 @@ import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMar
 import Button from 'components/common/Button'
 import { ArrowDownLine, ArrowUpLine, TrashBin } from 'components/common/Icons'
 import SwitchAutoLend from 'components/common/Switch/SwitchAutoLend'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import useAccount from 'hooks/accounts/useAccount'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useHealthComputer from 'hooks/useHealthComputer'

src/components/account/AccountSummary/AccountSummaryHeader.tsx

@@ -42,6 +42,7 @@ export default function AccountSummaryHeader(props: Props) {
     updatedHealthFactor,
     isAccountDetails,
   } = props
+  const address = useStore((s) => s.address)
   const onClose = useCallback(() => useStore.setState({ accountDetailsExpanded: false }), [])
   const accountBalance = useMemo(
     () => (account ? calculateAccountBalanceValue(account, prices, assets) : BN_ZERO),
@@ -68,10 +69,9 @@ export default function AccountSummaryHeader(props: Props) {
         />
       )}
       {isAccountDetails && (
-        <Text
+        <Text size='sm' className='w-full pb-1 text-white/50'>
-          size='sm'
+          {account.id === address ? 'Red Bank' : `Credit Account ${account.id}`}
-          className='w-full pb-1 text-white/50'
+        </Text>
-        >{`Credit Account ${account.id}`}</Text>
       )}
       <div className='flex items-end w-full gap-2 pb-2 border-b border-white/5'>
         <DisplayCurrency

src/components/account/AccountSummary/index.tsx

@@ -7,7 +7,7 @@ import AccountStrategiesTable from 'components/account/AccountStrategiesTable'
 import AccountSummaryHeader from 'components/account/AccountSummary/AccountSummaryHeader'
 import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMarketAssetsTableData'
 import Accordion from 'components/common/Accordion'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'

src/components/common/Background.tsx

@@ -15,23 +15,20 @@ export default function Background() {
   )
   const { pathname } = useLocation()
   const page = getPage(pathname)
-  const [isHLS, isV1] = useMemo(() => [page.split('-')[0] === 'hls', page === 'v1'], [page])
+  const [isHLS] = useMemo(() => [page.split('-')[0] === 'hls'], [page])
 
   useEffect(() => {
-    useStore.setState({ isHLS: isHLS, isV1: isV1 })
+    useStore.setState({ isHLS: isHLS })
-  }, [isHLS, isV1])
+  }, [isHLS])
 
   const [primaryOrbClassName, secondaryOrbClassName, tertiaryOrbClassName, bodyClassName] =
     useMemo(() => {
       if (isHLS) {
         return ['bg-orb-primary-hls', 'bg-orb-secondary-hls', 'bg-orb-tertiary-hls', 'bg-body-hls']
       }
-      if (isV1) {
-        return ['bg-orb-primary-v1', 'bg-orb-secondary-v1', 'bg-orb-tertiary-v1', 'bg-body-v1']
-      }
 
       return ['bg-orb-primary', 'bg-orb-secondary', 'bg-orb-tertiary', 'bg-body']
-    }, [isHLS, isV1])
+    }, [isHLS])
 
   return (
     <div

src/components/common/Intro.tsx

@@ -9,6 +9,7 @@ import {
   GridPlanet,
   GridTire,
   GridWeb,
+  Wallet,
 } from 'components/common/Icons'
 import Text from 'components/common/Text'
 import { Tooltip } from 'components/common/Tooltip'
@@ -52,6 +53,12 @@ function IntroBackground(props: { bg: Props['bg'] }) {
           <GridPlanet />
         </div>
       )
+    case 'v1':
+      return (
+        <div className='absolute top-0 right-0 block w-80 opacity-5'>
+          <Wallet />
+        </div>
+      )
     default:
       return (
         <div className='absolute bottom-0 right-0 block w-3/4 md:w-120 opacity-5'>

src/components/common/Switch/SwitchWithLabel.tsx

@@ -12,11 +12,12 @@ interface Props {
   className?: string
   tooltip?: string
   disabled?: boolean
+  placement?: 'top' | 'bottom' | 'left' | 'right'
 }
 
 export default function SwitchWithLabel(props: Props) {
   return (
-    <div className={classNames('flex w-full', props.className)}>
+    <div className={classNames('flex w-full items-center ', props.className)}>
       <div className='flex flex-1'>
         <Text className='mr-2 text-white/70' size='sm'>
           {props.label}
@@ -24,8 +25,9 @@ export default function SwitchWithLabel(props: Props) {
         {props.tooltip && (
           <Tooltip
             type='info'
+            placement={props.placement ?? 'top'}
             content={
-              <Text size='sm' className='px-2 py-3'>
+              <Text size='sm' className='px-2 py-3 max-w-[320px]'>
                 {props.tooltip}
               </Text>
             }

src/components/common/Tab.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames'
+import { NavLink, useParams, useSearchParams } from 'react-router-dom'
+import { useMemo } from 'react'
+
+import SwitchWithLabel from 'components/common/Switch/SwitchWithLabel'
+import useAccountId from 'hooks/useAccountId'
+import useChainConfig from 'hooks/useChainConfig'
+import useStore from 'store'
+import { getRoute } from 'utils/route'
+
+const underlineClasses =
+  'relative before:absolute before:h-[2px] before:-bottom-1 before:left-0 before:right-0 before:gradient-active-tab'
+
+interface Props {
+  tabs: Tab[]
+  activeTabIdx: number
+  showV1Toggle?: boolean
+}
+
+export default function Tab(props: Props) {
+  const accountId = useAccountId()
+  const { address } = useParams()
+  const [searchParams] = useSearchParams()
+  const chainConfig = useChainConfig()
+  const isV1 = useStore((s) => s.isV1)
+
+  const filteredTabs = useMemo(
+    () =>
+      props.tabs.map((tab) => (tab.name === 'Farm' && (!chainConfig.farm || isV1) ? null : tab)),
+    [chainConfig, props.tabs, isV1],
+  )
+
+  return (
+    <div className='relative flex w-full'>
+      <div className='flex flex-grow'>
+        {filteredTabs.map((tab, index) =>
+          tab ? (
+            <NavLink
+              key={tab.page}
+              to={getRoute(tab.page, searchParams, address, accountId)}
+              className={classNames(
+                props.activeTabIdx === index ? underlineClasses : 'text-white/40',
+                'relative mr-8 text-xl ',
+              )}
+            >
+              {tab.name}
+            </NavLink>
+          ) : null,
+        )}
+      </div>
+      {props.showV1Toggle && (
+        <div className='flex items-center w-40 h-full'>
+          <SwitchWithLabel
+            name='v1-toggle'
+            label='Wallet Mode'
+            value={isV1}
+            onChange={() => useStore.setState({ isV1: !isV1 })}
+            tooltip='The Wallet Mode allows you to interact with the Red Bank without the use of a Credit Account. Funds will be deposited and borrowed directly from and to your Wallet. However you will not be able to use the deposited funds for trading or farming.'
+            placement='bottom'
+          />
+        </div>
+      )}
+    </div>
+  )
+}

src/components/common/Tooltip/index.tsx

@@ -38,7 +38,7 @@ export const Tooltip = (props: Props) => {
       placement={props.placement ?? 'top'}
       render={() => (
         <TooltipContent
-          hideArrow={props.hideArrow}
+          hideArrow={props.placement === 'bottom' ? true : props.hideArrow}
           type={props.type}
           content={props.content}
           className={props.contentClassName}

src/components/earn/Tab.tsx

@@ -1,36 +0,0 @@
-import classNames from 'classnames'
-import { NavLink, useParams, useSearchParams } from 'react-router-dom'
-
-import useAccountId from 'hooks/useAccountId'
-import { getRoute } from 'utils/route'
-
-const underlineClasses =
-  'relative before:absolute before:h-[2px] before:-bottom-1 before:left-0 before:right-0 before:gradient-active-tab'
-
-interface Props {
-  tabs: Tab[]
-  activeTabIdx: number
-}
-
-export default function Tab(props: Props) {
-  const accountId = useAccountId()
-  const { address } = useParams()
-  const [searchParams] = useSearchParams()
-
-  return (
-    <div className='relative w-full'>
-      {props.tabs.map((tab, index) => (
-        <NavLink
-          key={tab.page}
-          to={getRoute(tab.page, searchParams, address, accountId)}
-          className={classNames(
-            props.activeTabIdx === index ? underlineClasses : 'text-white/40',
-            'relative mr-8 text-xl ',
-          )}
-        >
-          {tab.name}
-        </NavLink>
-      ))}
-    </div>
-  )
-}

src/components/farm/Table/AvailableVaultsTable.tsx

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

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

@@ -1,15 +1,15 @@
 import { ColumnDef } 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/farm/Table/Columns/Apy'
-import { Deposit, DEPOSIT_META } from 'components/earn/farm/Table/Columns/Deposit'
+import { Deposit, DEPOSIT_META } from 'components/farm/Table/Columns/Deposit'
 import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
-} from 'components/earn/farm/Table/Columns/DepositCap'
+} from 'components/farm/Table/Columns/DepositCap'
-import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
+import MaxLTV, { LTV_MAX_META } from 'components/farm/Table/Columns/MaxLTV'
-import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
+import Name, { NAME_META } from 'components/farm/Table/Columns/Name'
-import TVL, { TVL_META } from 'components/earn/farm/Table/Columns/TVL'
+import TVL, { TVL_META } from 'components/farm/Table/Columns/TVL'
 
 interface Props {
   isLoading: boolean

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

@@ -1,18 +1,16 @@
 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/farm/Table/Columns/Apy'
 import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
-} from 'components/earn/farm/Table/Columns/DepositCap'
+} from 'components/farm/Table/Columns/DepositCap'
-import Manage, { MANAGE_META } from 'components/earn/farm/Table/Columns/Manage'
+import Manage, { MANAGE_META } from 'components/farm/Table/Columns/Manage'
-import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
+import MaxLTV, { LTV_MAX_META } from 'components/farm/Table/Columns/MaxLTV'
-import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
+import Name, { NAME_META } from 'components/farm/Table/Columns/Name'
-import PositionValue, {
+import PositionValue, { POSITION_VALUE_META } from 'components/farm/Table/Columns/PositionValue'
-  POSITION_VALUE_META,
+import TVL, { TVL_META } from 'components/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/farm/Table/DepositedVaultsTable.tsx

@@ -1,7 +1,5 @@
-import React from 'react'
-
 import Table from 'components/common/Table'
-import useDepositedColumns from 'components/earn/farm/Table/Columns/useDepositedColumns'
+import useDepositedColumns from 'components/farm/Table/Columns/useDepositedColumns'
 
 type Props = {
   data: DepositedVault[]

src/components/farm/Vaults.tsx

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

src/components/header/DesktopHeader.tsx

@@ -36,11 +36,9 @@ export const menuTree = (walletId: WalletID, chainConfig: ChainConfig): MenuTree
     ],
   },
   ...(chainConfig.perps ? [{ pages: ['perps'] as Page[], label: 'Perps' }] : []),
-  { pages: chainConfig.farm ? ['lend', 'farm'] : ['lend'], label: 'Earn' },
+  { pages: chainConfig.farm ? ['lend', 'farm', 'borrow'] : ['lend'], label: 'Lend & Borrow' },
-  { pages: ['borrow'], label: 'Borrow' },
   ...(chainConfig.hls ? [{ pages: ['hls-staking'] as Page[], label: 'High Leverage' }] : []),
   { pages: ['portfolio'], label: 'Portfolio' },
-  { pages: ['v1'], label: 'V1' },
   { pages: ['governance'], label: 'Governance', externalUrl: getGovernanceUrl(walletId) },
 ]
 
@@ -49,9 +47,8 @@ export default function DesktopHeader() {
   const focusComponent = useStore((s) => s.focusComponent)
   const isOracleStale = useStore((s) => s.isOracleStale)
   const isHLS = useStore((s) => s.isHLS)
-  const isV1 = useStore((s) => s.isV1)
   const accountId = useAccountId()
-  const showAccountMenu = address && !isHLS && !isV1
+  const showAccountMenu = address && !isHLS
 
   function handleCloseFocusMode() {
     if (focusComponent && focusComponent.onClose) focusComponent.onClose()

src/components/header/navigation/Routes.tsx

@@ -12,11 +12,12 @@ import PerpsPage from 'pages/PerpsPage'
 import PortfolioAccountPage from 'pages/PortfolioAccountPage'
 import PortfolioPage from 'pages/PortfolioPage'
 import TradePage from 'pages/TradePage'
-import V1Page from 'pages/V1Page'
 import Layout from 'pages/_layout'
+import useStore from 'store'
 
 export default function Routes() {
   const chainConfig = useChainConfig()
+  const isV1 = useStore((s) => s.isV1)
   return (
     <RoutesWrapper>
       <Route
@@ -29,11 +30,10 @@ export default function Routes() {
         <Route path='/trade' element={<TradePage />} />
         <Route path='/trade-advanced' element={<TradePage />} />
         {chainConfig.perps && <Route path='/perps' element={<PerpsPage />} />}
-        {chainConfig.farm && <Route path='/farm' element={<FarmPage />} />}
+        {chainConfig.farm && !isV1 && <Route path='/farm' element={<FarmPage />} />}
         <Route path='/lend' element={<LendPage />} />
         <Route path='/borrow' element={<BorrowPage />} />
         <Route path='/portfolio' element={<PortfolioPage />} />
-        <Route path='/v1' element={<V1Page />} />
         <Route path='/mobile' element={<MobilePage />} />
         {chainConfig.hls && <Route path='/hls-staking' element={<HLSStakingPage />} />}
         {chainConfig.hls && <Route path='/hls-farm' element={<HLSFarmPage />} />}
@@ -43,13 +43,12 @@ export default function Routes() {
           <Route path='trade' element={<TradePage />} />
           <Route path='trade-advanced' element={<TradePage />} />
           {chainConfig.perps && <Route path='perps' element={<PerpsPage />} />}
-          {chainConfig.farm && <Route path='farm' element={<FarmPage />} />}
+          {chainConfig.farm && !isV1 && <Route path='farm' element={<FarmPage />} />}
           <Route path='lend' element={<LendPage />} />
           <Route path='borrow' element={<BorrowPage />} />
           <Route path='portfolio' element={<PortfolioPage />} />
           {chainConfig.hls && <Route path='hls-staking' element={<HLSStakingPage />} />}
           {chainConfig.hls && <Route path='hls-farm' element={<HLSFarmPage />} />}
-          <Route path='v1' element={<V1Page />} />
           <Route path='portfolio/:accountId'>
             <Route path='' element={<PortfolioAccountPage />} />
           </Route>

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

@@ -1,10 +1,10 @@
 import { ColumnDef } from '@tanstack/react-table'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
-import DepositCap, { DEPOSIT_CAP_META } from 'components/earn/farm/Table/Columns/DepositCap'
+import DepositCap, { DEPOSIT_CAP_META } from 'components/farm/Table/Columns/DepositCap'
-import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
+import MaxLTV, { LTV_MAX_META } from 'components/farm/Table/Columns/MaxLTV'
-import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
+import Name, { NAME_META } from 'components/farm/Table/Columns/Name'
-import TVL, { TVL_META } from 'components/earn/farm/Table/Columns/TVL'
+import TVL, { TVL_META } from 'components/farm/Table/Columns/TVL'
 import Apy, { APY_META } from 'components/hls/Farm/Table/Columns/APY'
 import Deposit, { DEPOSIT_META } from 'components/hls/Farm/Table/Columns/Deposit'
 import MaxLeverage, { MAX_LEV_META } from 'components/hls/Farm/Table/Columns/MaxLeverage'

src/components/lend/Lends.tsx

@@ -1,6 +1,6 @@
-import AvailableLendsTable from 'components/earn/lend/Table/AvailableLendsTable'
+import AvailableLendsTable from 'components/lend/Table/AvailableLendsTable'
-import DepositedLendsTable from 'components/earn/lend/Table/DepositedLendsTable'
+import DepositedLendsTable from 'components/lend/Table/DepositedLendsTable'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import { BN_ZERO } from 'constants/math'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
 

src/components/lend/Table/AvailableLendsTable.tsx

@@ -3,8 +3,8 @@ import { useCallback } from 'react'
 
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
-import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
+import { NAME_META } from 'components/lend/Table/Columns/Name'
-import useAvailableColumns from 'components/earn/lend/Table/Columns/useAvailableColumns'
+import useAvailableColumns from 'components/lend/Table/Columns/useAvailableColumns'
 
 type Props = {
   data: LendingMarketTableData[]

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

@@ -1,14 +1,14 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import Apy, { APY_META } from 'components/earn/lend/Table/Columns/Apy'
+import Apy, { APY_META } from 'components/lend/Table/Columns/Apy'
-import Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
+import Chevron, { CHEVRON_META } from 'components/lend/Table/Columns/Chevron'
 import DepositCap, {
   DEPOSIT_CAP_META,
   marketDepositCapSortingFn,
-} from 'components/earn/lend/Table/Columns/DepositCap'
+} from 'components/lend/Table/Columns/DepositCap'
-import LendButton, { LEND_BUTTON_META } from 'components/earn/lend/Table/Columns/LendButton'
+import LendButton, { LEND_BUTTON_META } from 'components/lend/Table/Columns/LendButton'
-import Name, { NAME_META } from 'components/earn/lend/Table/Columns/Name'
+import Name, { NAME_META } from 'components/lend/Table/Columns/Name'
 
 interface Props {
   isLoading: boolean

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

@@ -1,18 +1,18 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import Apy, { APY_META } from 'components/earn/lend/Table/Columns/Apy'
+import Apy, { APY_META } from 'components/lend/Table/Columns/Apy'
-import Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
+import Chevron, { CHEVRON_META } from 'components/lend/Table/Columns/Chevron'
 import DepositCap, {
   DEPOSIT_CAP_META,
   marketDepositCapSortingFn,
-} from 'components/earn/lend/Table/Columns/DepositCap'
+} from 'components/lend/Table/Columns/DepositCap'
 import DepositValue, {
   DEPOSIT_VALUE_META,
   depositedSortingFn,
-} from 'components/earn/lend/Table/Columns/DepositValue'
+} from 'components/lend/Table/Columns/DepositValue'
-import Manage, { MANAGE_META } from 'components/earn/lend/Table/Columns/Manage'
+import Manage, { MANAGE_META } from 'components/lend/Table/Columns/Manage'
-import Name, { NAME_META } from 'components/earn/lend/Table/Columns/Name'
+import Name, { NAME_META } from 'components/lend/Table/Columns/Name'
 import Action from 'components/v1/Table/deposits/Columns/Action'
 
 interface Props {

src/components/lend/Table/DepositedLendsTable.tsx

@@ -3,9 +3,9 @@ import { useCallback } from 'react'
 
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
-import { DEPOSIT_VALUE_META } from 'components/earn/lend/Table/Columns/DepositValue'
+import { DEPOSIT_VALUE_META } from 'components/lend/Table/Columns/DepositValue'
-import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
+import { NAME_META } from 'components/lend/Table/Columns/Name'
-import useDepositedColumns from 'components/earn/lend/Table/Columns/useDepositedColumns'
+import useDepositedColumns from 'components/lend/Table/Columns/useDepositedColumns'
 
 type Props = {
   data: LendingMarketTableData[]

src/components/portfolio/Account/Balances.tsx

@@ -5,7 +5,7 @@ import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMar
 import Card from 'components/common/Card'
 import TableSkeleton from 'components/common/Table/TableSkeleton'
 import Text from 'components/common/Text'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import useAccount from 'hooks/accounts/useAccount'
 
 interface Props {

src/components/portfolio/Account/Summary.tsx

@@ -3,7 +3,7 @@ import { Suspense, useMemo } from 'react'
 import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMarketAssetsTableData'
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import { FormattedNumber } from 'components/common/FormattedNumber'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import Skeleton from 'components/portfolio/SummarySkeleton'
 import { MAX_AMOUNT_DECIMALS } from 'constants/math'
 import useAccount from 'hooks/accounts/useAccount'
@@ -46,15 +46,25 @@ function Content(props: Props) {
 
     return [
       {
-        title: <DisplayCurrency className='text-xl' coin={positionValue} />,
+        title: (
+          <DisplayCurrency
+            className='text-xl'
+            coin={positionValue}
+            options={{ abbreviated: false }}
+          />
+        ),
         sub: DEFAULT_PORTFOLIO_STATS[0].sub,
       },
       {
-        title: <DisplayCurrency className='text-xl' coin={debts} />,
+        title: (
+          <DisplayCurrency className='text-xl' coin={debts} options={{ abbreviated: false }} />
+        ),
         sub: DEFAULT_PORTFOLIO_STATS[1].sub,
       },
       {
-        title: <DisplayCurrency className='text-xl' coin={netWorth} />,
+        title: (
+          <DisplayCurrency className='text-xl' coin={netWorth} options={{ abbreviated: false }} />
+        ),
         sub: DEFAULT_PORTFOLIO_STATS[2].sub,
       },
       {
@@ -84,12 +94,14 @@ function Content(props: Props) {
     ]
   }, [account, assets, borrowAssets, hlsStrategies, lendingAssets, prices, vaultAprs, props.v1])
 
+  if (props.v1 && account?.lends.length == 0) return null
+
   return (
     <Skeleton
       stats={stats}
       health={health}
       healthFactor={healthFactor}
-      title={props.v1 ? 'V1 Portfolio' : `Credit Account ${props.accountId}`}
+      title={props.v1 ? 'Wallet Mode Portfolio' : `Credit Account ${props.accountId}`}
       accountId={props.accountId}
     />
   )

src/components/portfolio/Card/index.tsx

@@ -5,7 +5,7 @@ import { NavLink, useParams, useSearchParams } from 'react-router-dom'
 import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMarketAssetsTableData'
 import { FormattedNumber } from 'components/common/FormattedNumber'
 import Loading from 'components/common/Loading'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import Skeleton from 'components/portfolio/Card/Skeleton'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'

src/components/portfolio/Overview/Summary.tsx

@@ -4,9 +4,10 @@ import { useParams } from 'react-router-dom'
 import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMarketAssetsTableData'
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import { FormattedNumber } from 'components/common/FormattedNumber'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import SummarySkeleton from 'components/portfolio/SummarySkeleton'
 import { MAX_AMOUNT_DECIMALS } from 'constants/math'
+import useAccount from 'hooks/accounts/useAccount'
 import useAccounts from 'hooks/accounts/useAccounts'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useHLSStakingAssets from 'hooks/useHLSStakingAssets'
@@ -27,8 +28,10 @@ export default function PortfolioSummary() {
   const { data: hlsStrategies } = useHLSStakingAssets()
   const { data: vaultAprs } = useVaultAprs()
   const assets = useAllAssets()
+  const { data: v1Account } = useAccount(urlAddress)
   const stats = useMemo(() => {
     if (!accounts?.length) return
+    if (v1Account) accounts.push(v1Account)
     const combinedAccount = accounts.reduce(
       (combinedAccount, account) => {
         combinedAccount.debts = combinedAccount.debts.concat(account.debts)
@@ -60,15 +63,25 @@ export default function PortfolioSummary() {
 
     return [
       {
-        title: <DisplayCurrency className='text-xl' coin={positionValue} />,
+        title: (
+          <DisplayCurrency
+            className='text-xl'
+            coin={positionValue}
+            options={{ abbreviated: false }}
+          />
+        ),
         sub: DEFAULT_PORTFOLIO_STATS[0].sub,
       },
       {
-        title: <DisplayCurrency className='text-xl' coin={debts} />,
+        title: (
+          <DisplayCurrency className='text-xl' coin={debts} options={{ abbreviated: false }} />
+        ),
         sub: DEFAULT_PORTFOLIO_STATS[1].sub,
       },
       {
-        title: <DisplayCurrency className='text-xl' coin={netWorth} />,
+        title: (
+          <DisplayCurrency className='text-xl' coin={netWorth} options={{ abbreviated: false }} />
+        ),
         sub: DEFAULT_PORTFOLIO_STATS[2].sub,
       },
       {
@@ -96,7 +109,7 @@ export default function PortfolioSummary() {
         sub: 'Combined leverage',
       },
     ]
-  }, [accounts, assets, borrowAssets, hlsStrategies, lendingAssets, prices, vaultAprs])
+  }, [accounts, assets, borrowAssets, hlsStrategies, lendingAssets, prices, vaultAprs, v1Account])
 
   if (!walletAddress && !urlAddress) return null
 

src/components/trade/AccountDetailsCard.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 
 import AccountBalancesTable from 'components/account/AccountBalancesTable'
 import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMarketAssetsTableData'
-import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'components/lend/Table/useLendingMarketAssetsTableData'
 import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 
 export default function AccountDetailsCard() {

src/components/v1/Deposits.tsx

@@ -1,4 +1,4 @@
-import DepositsTable from 'components/earn/lend/Table/DepositedLendsTable'
+import DepositsTable from 'components/lend/Table/DepositedLendsTable'
 import useV1DepositsTableData from 'components/v1/Table/useV1DepositsTableData'
 import { BN_ZERO } from 'constants/math'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'

src/components/v1/V1Intro.tsx

@@ -8,12 +8,10 @@ export default function V1Intro() {
     <Intro
       text={
         <>
-          <span className='text-white'>Welcome to the Red Bank!</span>
+          The <span className='text-white'>Wallet Mode</span> provides simple lending and borrowing
-          <br />
-          This is the first version (v1) of the Red Bank. It provides simple lending and borrowing,
           without the use of Credit Accounts. Funds are{' '}
-          <span className='text-white'>not cross-collateralized</span> and can&lsquo;t be used on v2
+          <span className='text-white'>not cross-collateralized</span> and can&lsquo;t be used in
-          as collateral.
+          the Trade or Farm interface.
         </>
       }
       bg='v1'

src/constants/pages.ts

@@ -1,5 +1,6 @@
-export const EARN_TABS: Tab[] = [
+export const LEND_AND_BORROW_TABS: Tab[] = [
   { page: 'lend', name: 'Lend' },
+  { page: 'borrow', name: 'Borrow' },
   { page: 'farm', name: 'Farm' },
 ]
 

src/pages/BorrowPage.tsx

@@ -1,13 +1,19 @@
-import Borrowings from 'components/borrow/Borrowings'
 import BorrowIntro from 'components/borrow/BorrowIntro'
-import MigrationBanner from 'components/common/MigrationBanner'
+import Borrowings from 'components/borrow/Borrowings'
+import Tab from 'components/common/Tab'
+import V1Borrowings from 'components/v1/Borrowings'
+import V1Intro from 'components/v1/V1Intro'
+import { LEND_AND_BORROW_TABS } from 'constants/pages'
+import useStore from 'store'
 
 export default function BorrowPage() {
+  const isV1 = useStore((s) => s.isV1)
+
   return (
     <div className='flex flex-wrap w-full gap-6'>
-      <MigrationBanner />
+      <Tab tabs={LEND_AND_BORROW_TABS} activeTabIdx={1} showV1Toggle />
-      <BorrowIntro />
+      {isV1 ? <V1Intro /> : <BorrowIntro />}
-      <Borrowings />
+      {isV1 ? <V1Borrowings /> : <Borrowings />}
     </div>
   )
 }

src/pages/FarmPage.tsx

@@ -1,14 +1,14 @@
-import FarmIntro from 'components/earn/farm/FarmIntro'
-import Vaults from 'components/earn/farm/Vaults'
-import Tab from 'components/earn/Tab'
 import MigrationBanner from 'components/common/MigrationBanner'
-import { EARN_TABS } from 'constants/pages'
+import Tab from 'components/common/Tab'
+import FarmIntro from 'components/farm/FarmIntro'
+import Vaults from 'components/farm/Vaults'
+import { LEND_AND_BORROW_TABS } from 'constants/pages'
 
 export default function FarmPage() {
   return (
     <div className='flex flex-wrap w-full gap-6'>
       <MigrationBanner />
-      <Tab tabs={EARN_TABS} activeTabIdx={1} />
+      <Tab tabs={LEND_AND_BORROW_TABS} activeTabIdx={2} showV1Toggle />
       <FarmIntro />
       <Vaults />
     </div>

src/pages/HLSFarmPage.tsx

@@ -1,7 +1,7 @@
-import Tab from 'components/earn/Tab'
+import MigrationBanner from 'components/common/MigrationBanner'
+import Tab from 'components/common/Tab'
 import AvailableHLSVaults from 'components/hls/Farm/AvailableHLSVaults'
 import HlsFarmIntro from 'components/hls/Farm/HLSFarmIntro'
-import MigrationBanner from 'components/common/MigrationBanner'
 import { HLS_TABS } from 'constants/pages'
 
 export default function HLSFarmPage() {

src/pages/HLSStakingPage.tsx

@@ -1,8 +1,8 @@
-import Tab from 'components/earn/Tab'
+import MigrationBanner from 'components/common/MigrationBanner'
+import Tab from 'components/common/Tab'
 import ActiveStakingAccounts from 'components/hls/Staking/ActiveStakingAccounts'
 import AvailableHlsStakingAssets from 'components/hls/Staking/AvailableHLSStakingAssets'
 import HLSStakingIntro from 'components/hls/Staking/HLSStakingIntro'
-import MigrationBanner from 'components/common/MigrationBanner'
 import { HLS_TABS } from 'constants/pages'
 
 export default function HLSStakingPage() {

src/pages/LendPage.tsx

@@ -1,19 +1,19 @@
-import MigrationBanner from 'components/common/MigrationBanner'
+import Tab from 'components/common/Tab'
-import Tab from 'components/earn/Tab'
+import LendIntro from 'components/lend/LendIntro'
-import LendIntro from 'components/earn/lend/LendIntro'
+import Lends from 'components/lend/Lends'
-import Lends from 'components/earn/lend/Lends'
+import Deposits from 'components/v1/Deposits'
-import { EARN_TABS } from 'constants/pages'
+import V1Intro from 'components/v1/V1Intro'
-import useChainConfig from 'hooks/useChainConfig'
+import { LEND_AND_BORROW_TABS } from 'constants/pages'
+import useStore from 'store'
 
 export default function LendPage() {
-  const chainConfig = useChainConfig()
+  const isV1 = useStore((s) => s.isV1)
 
   return (
     <div className='flex flex-wrap w-full gap-6'>
-      <MigrationBanner />
+      <Tab tabs={LEND_AND_BORROW_TABS} activeTabIdx={0} showV1Toggle />
-      {chainConfig.farm && <Tab tabs={EARN_TABS} activeTabIdx={0} />}
+      {isV1 ? <V1Intro /> : <LendIntro />}
-      <LendIntro />
+      {isV1 ? <Deposits /> : <Lends />}
-      <Lends />
     </div>
   )
 }

src/pages/PortfolioPage.tsx

@@ -1,15 +1,20 @@
+import { useParams } from 'react-router-dom'
+
 import MigrationBanner from 'components/common/MigrationBanner'
+import ShareBar from 'components/common/ShareBar'
+import Summary from 'components/portfolio/Account/Summary'
 import AccountOverview from 'components/portfolio/Overview'
 import PortfolioSummary from 'components/portfolio/Overview/Summary'
 import PortfolioIntro from 'components/portfolio/PortfolioIntro'
-import ShareBar from 'components/common/ShareBar'
 
 export default function PortfolioPage() {
+  const { address } = useParams()
   return (
     <div className='flex flex-wrap w-full gap-6'>
       <MigrationBanner />
       <PortfolioIntro />
       <PortfolioSummary />
+      {address && <Summary accountId={address} v1 />}
       <AccountOverview />
       <ShareBar text='Have a look at this @mars_protocol portfolio!' />
     </div>

src/pages/V1Page.tsx

@@ -1,19 +0,0 @@
-import MigrationBanner from 'components/common/MigrationBanner'
-import Summary from 'components/portfolio/Account/Summary'
-import Borrowings from 'components/v1/Borrowings'
-import Deposits from 'components/v1/Deposits'
-import V1Intro from 'components/v1/V1Intro'
-import useStore from 'store'
-
-export default function V1Page() {
-  const address = useStore((s) => s.address)
-  return (
-    <div className='flex flex-wrap w-full gap-6'>
-      <MigrationBanner />
-      <V1Intro />
-      {address && <Summary accountId={address} v1 />}
-      <Deposits />
-      <Borrowings />
-    </div>
-  )
-}

tailwind.config.js

@@ -102,7 +102,6 @@ module.exports = {
         axlusdc: '#478edc',
         body: '#0D0012',
         'body-hls': '#090000',
-        'body-v1': '#10000a',
         'body-dark': '#141621',
         chart: '#220e1d',
         error: '#F04438',
@@ -124,13 +123,10 @@ module.exports = {
         osmo: '#9f1ab9',
         'orb-primary': '#b12f25',
         'orb-primary-hls': '#FF645F',
-        'orb-primary-v1': '#612e4d',
         'orb-secondary': '#530781',
         'orb-secondary-hls': '#a03b45',
-        'orb-secondary-v1': '#692f55',
         'orb-tertiary': '#ff00c7',
         'orb-tertiary-hls': '#FB9562',
-        'orb-tertiary-v1': '#993878',
         profit: '#4CA30D',
         primary: '#FF625E',
         secondary: '#FB9562',