feat: implemented wallet-mode

This commit is contained in:
Linkie Link 2024-02-19 14:46:15 +01:00
parent 1a45d64bac
commit 65ff38f117
No known key found for this signature in database
GPG Key ID: 5318B0F2564D38EA
61 changed files with 232 additions and 192 deletions

View File

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

View File

@ -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 location = useLocation()
const { account, page } = props
const { data: hlsStrategies } = useHLSStakingAssets()
const { data: vaultAprs } = useVaultAprs()
const [reduceMotion] = useLocalStorage<boolean>(
@ -126,10 +132,7 @@ function AccountDetails(props: Props) {
vaultAprs,
],
)
const isFullWidth =
location.pathname.includes('trade') ||
location.pathname === '/' ||
location.pathname.includes('perps')
const isFullWidth = page === 'trade' || page === 'perps'
return (
<>

View File

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

View File

@ -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
size='sm'
className='w-full pb-1 text-white/50'
>{`Credit Account ${account.id}`}</Text>
<Text size='sm' className='w-full pb-1 text-white/50'>
{account.id === address ? 'Red Bank' : `Credit Account ${account.id}`}
</Text>
)}
<div className='flex items-end w-full gap-2 pb-2 border-b border-white/5'>
<DisplayCurrency

View File

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

View File

@ -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 })
}, [isHLS, isV1])
useStore.setState({ isHLS: isHLS })
}, [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

View File

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

View File

@ -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>
}

View File

@ -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>
)
}

View File

@ -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}

View File

@ -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>
)
}

View File

@ -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[]

View File

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

View File

@ -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'
import Manage, { MANAGE_META } from 'components/earn/farm/Table/Columns/Manage'
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/farm/Table/Columns/DepositCap'
import Manage, { MANAGE_META } from 'components/farm/Table/Columns/Manage'
import MaxLTV, { LTV_MAX_META } from 'components/farm/Table/Columns/MaxLTV'
import Name, { NAME_META } from 'components/farm/Table/Columns/Name'
import PositionValue, { POSITION_VALUE_META } from 'components/farm/Table/Columns/PositionValue'
import TVL, { TVL_META } from 'components/farm/Table/Columns/TVL'
interface Props {
isLoading: boolean

View File

@ -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[]

View File

@ -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/farm/Table/AvailableVaultsTable'
import DepositedVaultsTable from 'components/farm/Table/DepositedVaultsTable'
import VaultUnlockBanner from 'components/farm/VaultUnlockBanner'
import { BN_ZERO } from 'constants/math'
import useAccountId from 'hooks/useAccountId'
import useChainConfig from 'hooks/useChainConfig'

View File

@ -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: ['borrow'], label: 'Borrow' },
{ pages: chainConfig.farm ? ['lend', 'farm', 'borrow'] : ['lend'], label: 'Lend & 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()

View File

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

View File

@ -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 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 DepositCap, { DEPOSIT_CAP_META } from 'components/farm/Table/Columns/DepositCap'
import MaxLTV, { LTV_MAX_META } from 'components/farm/Table/Columns/MaxLTV'
import Name, { NAME_META } from 'components/farm/Table/Columns/Name'
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'

View File

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

View File

@ -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 useAvailableColumns from 'components/earn/lend/Table/Columns/useAvailableColumns'
import { NAME_META } from 'components/lend/Table/Columns/Name'
import useAvailableColumns from 'components/lend/Table/Columns/useAvailableColumns'
type Props = {
data: LendingMarketTableData[]

View File

@ -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 Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
import Apy, { APY_META } from 'components/lend/Table/Columns/Apy'
import Chevron, { CHEVRON_META } from 'components/lend/Table/Columns/Chevron'
import DepositCap, {
DEPOSIT_CAP_META,
marketDepositCapSortingFn,
} from 'components/earn/lend/Table/Columns/DepositCap'
import LendButton, { LEND_BUTTON_META } from 'components/earn/lend/Table/Columns/LendButton'
import Name, { NAME_META } from 'components/earn/lend/Table/Columns/Name'
} from 'components/lend/Table/Columns/DepositCap'
import LendButton, { LEND_BUTTON_META } from 'components/lend/Table/Columns/LendButton'
import Name, { NAME_META } from 'components/lend/Table/Columns/Name'
interface Props {
isLoading: boolean

View File

@ -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 Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
import Apy, { APY_META } from 'components/lend/Table/Columns/Apy'
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'
import Manage, { MANAGE_META } from 'components/earn/lend/Table/Columns/Manage'
import Name, { NAME_META } from 'components/earn/lend/Table/Columns/Name'
} from 'components/lend/Table/Columns/DepositValue'
import Manage, { MANAGE_META } from 'components/lend/Table/Columns/Manage'
import Name, { NAME_META } from 'components/lend/Table/Columns/Name'
import Action from 'components/v1/Table/deposits/Columns/Action'
interface Props {

View File

@ -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 { NAME_META } from 'components/earn/lend/Table/Columns/Name'
import useDepositedColumns from 'components/earn/lend/Table/Columns/useDepositedColumns'
import { DEPOSIT_VALUE_META } from 'components/lend/Table/Columns/DepositValue'
import { NAME_META } from 'components/lend/Table/Columns/Name'
import useDepositedColumns from 'components/lend/Table/Columns/useDepositedColumns'
type Props = {
data: LendingMarketTableData[]

View File

@ -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 {

View File

@ -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}
/>
)

View File

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

View File

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

View File

@ -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() {

View File

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

View File

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

View File

@ -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' },
]

View File

@ -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 />
<BorrowIntro />
<Borrowings />
<Tab tabs={LEND_AND_BORROW_TABS} activeTabIdx={1} showV1Toggle />
{isV1 ? <V1Intro /> : <BorrowIntro />}
{isV1 ? <V1Borrowings /> : <Borrowings />}
</div>
)
}

View File

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

View File

@ -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() {

View File

@ -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() {

View File

@ -1,19 +1,19 @@
import MigrationBanner from 'components/common/MigrationBanner'
import Tab from 'components/earn/Tab'
import LendIntro from 'components/earn/lend/LendIntro'
import Lends from 'components/earn/lend/Lends'
import { EARN_TABS } from 'constants/pages'
import useChainConfig from 'hooks/useChainConfig'
import Tab from 'components/common/Tab'
import LendIntro from 'components/lend/LendIntro'
import Lends from 'components/lend/Lends'
import Deposits from 'components/v1/Deposits'
import V1Intro from 'components/v1/V1Intro'
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 />
{chainConfig.farm && <Tab tabs={EARN_TABS} activeTabIdx={0} />}
<LendIntro />
<Lends />
<Tab tabs={LEND_AND_BORROW_TABS} activeTabIdx={0} showV1Toggle />
{isV1 ? <V1Intro /> : <LendIntro />}
{isV1 ? <Deposits /> : <Lends />}
</div>
)
}

View File

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

View File

@ -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>
)
}

View File

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