diff --git a/src/components/account/AccountComposition.tsx b/src/components/account/AccountComposition.tsx index dbd0fecf..34dddb85 100644 --- a/src/components/account/AccountComposition.tsx +++ b/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' diff --git a/src/components/account/AccountDetails/index.tsx b/src/components/account/AccountDetails/index.tsx index e0ad160b..a3e56f5d 100644 --- a/src/components/account/AccountDetails/index.tsx +++ b/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 - return + return } 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( @@ -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 ( <> diff --git a/src/components/account/AccountList/AccountStats.tsx b/src/components/account/AccountList/AccountStats.tsx index f150ee9c..4ceeeea5 100644 --- a/src/components/account/AccountList/AccountStats.tsx +++ b/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' diff --git a/src/components/account/AccountSummary/AccountSummaryHeader.tsx b/src/components/account/AccountSummary/AccountSummaryHeader.tsx index 54282e3b..e2dc4abb 100644 --- a/src/components/account/AccountSummary/AccountSummaryHeader.tsx +++ b/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 && ( - {`Credit Account ${account.id}`} + + {account.id === address ? 'Red Bank' : `Credit Account ${account.id}`} + )}
[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 (
) + case 'v1': + return ( +
+ +
+ ) default: return (
diff --git a/src/components/common/Switch/SwitchWithLabel.tsx b/src/components/common/Switch/SwitchWithLabel.tsx index 63714416..acbe1336 100644 --- a/src/components/common/Switch/SwitchWithLabel.tsx +++ b/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 ( -
+
{props.label} @@ -24,8 +25,9 @@ export default function SwitchWithLabel(props: Props) { {props.tooltip && ( + {props.tooltip} } diff --git a/src/components/common/Tab.tsx b/src/components/common/Tab.tsx new file mode 100644 index 00000000..c9854bc6 --- /dev/null +++ b/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 ( +
+
+ {filteredTabs.map((tab, index) => + tab ? ( + + {tab.name} + + ) : null, + )} +
+ {props.showV1Toggle && ( +
+ 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' + /> +
+ )} +
+ ) +} diff --git a/src/components/common/Tooltip/index.tsx b/src/components/common/Tooltip/index.tsx index 1c94c7c1..5c1f60af 100644 --- a/src/components/common/Tooltip/index.tsx +++ b/src/components/common/Tooltip/index.tsx @@ -38,7 +38,7 @@ export const Tooltip = (props: Props) => { placement={props.placement ?? 'top'} render={() => ( - {props.tabs.map((tab, index) => ( - - {tab.name} - - ))} -
- ) -} diff --git a/src/components/earn/farm/FarmIntro.tsx b/src/components/farm/FarmIntro.tsx similarity index 100% rename from src/components/earn/farm/FarmIntro.tsx rename to src/components/farm/FarmIntro.tsx diff --git a/src/components/earn/farm/Table/AvailableVaultsTable.tsx b/src/components/farm/Table/AvailableVaultsTable.tsx similarity index 77% rename from src/components/earn/farm/Table/AvailableVaultsTable.tsx rename to src/components/farm/Table/AvailableVaultsTable.tsx index 8765c260..561397bd 100644 --- a/src/components/earn/farm/Table/AvailableVaultsTable.tsx +++ b/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[] diff --git a/src/components/earn/farm/Table/Columns/Apy.tsx b/src/components/farm/Table/Columns/Apy.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/Apy.tsx rename to src/components/farm/Table/Columns/Apy.tsx diff --git a/src/components/earn/farm/Table/Columns/Deposit.tsx b/src/components/farm/Table/Columns/Deposit.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/Deposit.tsx rename to src/components/farm/Table/Columns/Deposit.tsx diff --git a/src/components/earn/farm/Table/Columns/DepositCap.tsx b/src/components/farm/Table/Columns/DepositCap.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/DepositCap.tsx rename to src/components/farm/Table/Columns/DepositCap.tsx diff --git a/src/components/earn/farm/Table/Columns/Manage.tsx b/src/components/farm/Table/Columns/Manage.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/Manage.tsx rename to src/components/farm/Table/Columns/Manage.tsx diff --git a/src/components/earn/farm/Table/Columns/MaxLTV.tsx b/src/components/farm/Table/Columns/MaxLTV.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/MaxLTV.tsx rename to src/components/farm/Table/Columns/MaxLTV.tsx diff --git a/src/components/earn/farm/Table/Columns/Name.tsx b/src/components/farm/Table/Columns/Name.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/Name.tsx rename to src/components/farm/Table/Columns/Name.tsx diff --git a/src/components/earn/farm/Table/Columns/PositionValue.tsx b/src/components/farm/Table/Columns/PositionValue.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/PositionValue.tsx rename to src/components/farm/Table/Columns/PositionValue.tsx diff --git a/src/components/earn/farm/Table/Columns/TVL.tsx b/src/components/farm/Table/Columns/TVL.tsx similarity index 100% rename from src/components/earn/farm/Table/Columns/TVL.tsx rename to src/components/farm/Table/Columns/TVL.tsx diff --git a/src/components/earn/farm/Table/Columns/useAvailableColumns.tsx b/src/components/farm/Table/Columns/useAvailableColumns.tsx similarity index 72% rename from src/components/earn/farm/Table/Columns/useAvailableColumns.tsx rename to src/components/farm/Table/Columns/useAvailableColumns.tsx index ce5560ee..19e1101b 100644 --- a/src/components/earn/farm/Table/Columns/useAvailableColumns.tsx +++ b/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 { 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 diff --git a/src/components/earn/farm/Table/Columns/useDepositedColumns.tsx b/src/components/farm/Table/Columns/useDepositedColumns.tsx similarity index 74% rename from src/components/earn/farm/Table/Columns/useDepositedColumns.tsx rename to src/components/farm/Table/Columns/useDepositedColumns.tsx index 80da2f0b..2fa83442 100644 --- a/src/components/earn/farm/Table/Columns/useDepositedColumns.tsx +++ b/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' -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 diff --git a/src/components/earn/farm/Table/DepositedVaultsTable.tsx b/src/components/farm/Table/DepositedVaultsTable.tsx similarity index 77% rename from src/components/earn/farm/Table/DepositedVaultsTable.tsx rename to src/components/farm/Table/DepositedVaultsTable.tsx index 208b4a1f..b1496eef 100644 --- a/src/components/earn/farm/Table/DepositedVaultsTable.tsx +++ b/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[] diff --git a/src/components/earn/farm/VaultExpanded.tsx b/src/components/farm/VaultExpanded.tsx similarity index 100% rename from src/components/earn/farm/VaultExpanded.tsx rename to src/components/farm/VaultExpanded.tsx diff --git a/src/components/earn/farm/VaultRow.tsx b/src/components/farm/VaultRow.tsx similarity index 100% rename from src/components/earn/farm/VaultRow.tsx rename to src/components/farm/VaultRow.tsx diff --git a/src/components/earn/farm/VaultUnlockBanner.tsx b/src/components/farm/VaultUnlockBanner.tsx similarity index 100% rename from src/components/earn/farm/VaultUnlockBanner.tsx rename to src/components/farm/VaultUnlockBanner.tsx diff --git a/src/components/earn/farm/Vaults.tsx b/src/components/farm/Vaults.tsx similarity index 91% rename from src/components/earn/farm/Vaults.tsx rename to src/components/farm/Vaults.tsx index 8e829dc8..1c957425 100644 --- a/src/components/earn/farm/Vaults.tsx +++ b/src/components/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/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' diff --git a/src/components/header/DesktopHeader.tsx b/src/components/header/DesktopHeader.tsx index 493e6f73..12419d04 100644 --- a/src/components/header/DesktopHeader.tsx +++ b/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: ['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() diff --git a/src/components/header/navigation/Routes.tsx b/src/components/header/navigation/Routes.tsx index 901a7e08..93a0180c 100644 --- a/src/components/header/navigation/Routes.tsx +++ b/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 ( } /> } /> {chainConfig.perps && } />} - {chainConfig.farm && } />} + {chainConfig.farm && !isV1 && } />} } /> } /> } /> - } /> } /> {chainConfig.hls && } />} {chainConfig.hls && } />} @@ -43,13 +43,12 @@ export default function Routes() { } /> } /> {chainConfig.perps && } />} - {chainConfig.farm && } />} + {chainConfig.farm && !isV1 && } />} } /> } /> } /> {chainConfig.hls && } />} {chainConfig.hls && } />} - } /> } /> diff --git a/src/components/hls/Farm/Table/Columns/useAvailableColumns.tsx b/src/components/hls/Farm/Table/Columns/useAvailableColumns.tsx index 07298930..9130e4ad 100644 --- a/src/components/hls/Farm/Table/Columns/useAvailableColumns.tsx +++ b/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 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' diff --git a/src/components/earn/lend/LendIntro.tsx b/src/components/lend/LendIntro.tsx similarity index 100% rename from src/components/earn/lend/LendIntro.tsx rename to src/components/lend/LendIntro.tsx diff --git a/src/components/earn/lend/Lends.tsx b/src/components/lend/Lends.tsx similarity index 78% rename from src/components/earn/lend/Lends.tsx rename to src/components/lend/Lends.tsx index 19846a46..e4f2f3e1 100644 --- a/src/components/earn/lend/Lends.tsx +++ b/src/components/lend/Lends.tsx @@ -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' diff --git a/src/components/earn/lend/Table/AvailableLendsTable.tsx b/src/components/lend/Table/AvailableLendsTable.tsx similarity index 83% rename from src/components/earn/lend/Table/AvailableLendsTable.tsx rename to src/components/lend/Table/AvailableLendsTable.tsx index e4da0208..1258b355 100644 --- a/src/components/earn/lend/Table/AvailableLendsTable.tsx +++ b/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 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[] diff --git a/src/components/earn/lend/Table/Columns/Apy.tsx b/src/components/lend/Table/Columns/Apy.tsx similarity index 100% rename from src/components/earn/lend/Table/Columns/Apy.tsx rename to src/components/lend/Table/Columns/Apy.tsx diff --git a/src/components/earn/lend/Table/Columns/Chevron.tsx b/src/components/lend/Table/Columns/Chevron.tsx similarity index 100% rename from src/components/earn/lend/Table/Columns/Chevron.tsx rename to src/components/lend/Table/Columns/Chevron.tsx diff --git a/src/components/earn/lend/Table/Columns/DepositCap.tsx b/src/components/lend/Table/Columns/DepositCap.tsx similarity index 100% rename from src/components/earn/lend/Table/Columns/DepositCap.tsx rename to src/components/lend/Table/Columns/DepositCap.tsx diff --git a/src/components/earn/lend/Table/Columns/DepositValue.tsx b/src/components/lend/Table/Columns/DepositValue.tsx similarity index 100% rename from src/components/earn/lend/Table/Columns/DepositValue.tsx rename to src/components/lend/Table/Columns/DepositValue.tsx diff --git a/src/components/earn/lend/Table/Columns/LendButton.tsx b/src/components/lend/Table/Columns/LendButton.tsx similarity index 100% rename from src/components/earn/lend/Table/Columns/LendButton.tsx rename to src/components/lend/Table/Columns/LendButton.tsx diff --git a/src/components/earn/lend/Table/Columns/Manage.tsx b/src/components/lend/Table/Columns/Manage.tsx similarity index 100% rename from src/components/earn/lend/Table/Columns/Manage.tsx rename to src/components/lend/Table/Columns/Manage.tsx diff --git a/src/components/earn/lend/Table/Columns/Name.tsx b/src/components/lend/Table/Columns/Name.tsx similarity index 100% rename from src/components/earn/lend/Table/Columns/Name.tsx rename to src/components/lend/Table/Columns/Name.tsx diff --git a/src/components/earn/lend/Table/Columns/useAvailableColumns.tsx b/src/components/lend/Table/Columns/useAvailableColumns.tsx similarity index 74% rename from src/components/earn/lend/Table/Columns/useAvailableColumns.tsx rename to src/components/lend/Table/Columns/useAvailableColumns.tsx index 976402c1..287889cc 100644 --- a/src/components/earn/lend/Table/Columns/useAvailableColumns.tsx +++ b/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 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 diff --git a/src/components/earn/lend/Table/Columns/useDepositedColumns.tsx b/src/components/lend/Table/Columns/useDepositedColumns.tsx similarity index 78% rename from src/components/earn/lend/Table/Columns/useDepositedColumns.tsx rename to src/components/lend/Table/Columns/useDepositedColumns.tsx index 638888fe..29d8ee9d 100644 --- a/src/components/earn/lend/Table/Columns/useDepositedColumns.tsx +++ b/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 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 { diff --git a/src/components/earn/lend/Table/DepositedLendsTable.tsx b/src/components/lend/Table/DepositedLendsTable.tsx similarity index 80% rename from src/components/earn/lend/Table/DepositedLendsTable.tsx rename to src/components/lend/Table/DepositedLendsTable.tsx index d9ce9b68..054e5e86 100644 --- a/src/components/earn/lend/Table/DepositedLendsTable.tsx +++ b/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 { 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[] diff --git a/src/components/earn/lend/Table/useLendingMarketAssetsTableData.ts b/src/components/lend/Table/useLendingMarketAssetsTableData.ts similarity index 100% rename from src/components/earn/lend/Table/useLendingMarketAssetsTableData.ts rename to src/components/lend/Table/useLendingMarketAssetsTableData.ts diff --git a/src/components/portfolio/Account/Balances.tsx b/src/components/portfolio/Account/Balances.tsx index 6ed57229..44f98c2a 100644 --- a/src/components/portfolio/Account/Balances.tsx +++ b/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 { diff --git a/src/components/portfolio/Account/Summary.tsx b/src/components/portfolio/Account/Summary.tsx index 00ed0247..ec481c67 100644 --- a/src/components/portfolio/Account/Summary.tsx +++ b/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: , + title: ( + + ), sub: DEFAULT_PORTFOLIO_STATS[0].sub, }, { - title: , + title: ( + + ), sub: DEFAULT_PORTFOLIO_STATS[1].sub, }, { - title: , + title: ( + + ), 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 ( ) diff --git a/src/components/portfolio/Card/index.tsx b/src/components/portfolio/Card/index.tsx index cbaaf1af..f0397114 100644 --- a/src/components/portfolio/Card/index.tsx +++ b/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' diff --git a/src/components/portfolio/Overview/Summary.tsx b/src/components/portfolio/Overview/Summary.tsx index 4b4afd88..828455de 100644 --- a/src/components/portfolio/Overview/Summary.tsx +++ b/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: , + title: ( + + ), sub: DEFAULT_PORTFOLIO_STATS[0].sub, }, { - title: , + title: ( + + ), sub: DEFAULT_PORTFOLIO_STATS[1].sub, }, { - title: , + title: ( + + ), 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 diff --git a/src/components/trade/AccountDetailsCard.tsx b/src/components/trade/AccountDetailsCard.tsx index b922bfc8..cb8e82a7 100644 --- a/src/components/trade/AccountDetailsCard.tsx +++ b/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() { diff --git a/src/components/v1/Deposits.tsx b/src/components/v1/Deposits.tsx index 4fc025af..1d641738 100644 --- a/src/components/v1/Deposits.tsx +++ b/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' diff --git a/src/components/v1/V1Intro.tsx b/src/components/v1/V1Intro.tsx index f8212b8a..427ca35e 100644 --- a/src/components/v1/V1Intro.tsx +++ b/src/components/v1/V1Intro.tsx @@ -8,12 +8,10 @@ export default function V1Intro() { - Welcome to the Red Bank! -
- This is the first version (v1) of the Red Bank. It provides simple lending and borrowing, + The Wallet Mode provides simple lending and borrowing without the use of Credit Accounts. Funds are{' '} - not cross-collateralized and can‘t be used on v2 - as collateral. + not cross-collateralized and can‘t be used in + the Trade or Farm interface. } bg='v1' diff --git a/src/constants/pages.ts b/src/constants/pages.ts index e545b7f7..7844c9be 100644 --- a/src/constants/pages.ts +++ b/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' }, ] diff --git a/src/pages/BorrowPage.tsx b/src/pages/BorrowPage.tsx index 8eefc851..a6279e4f 100644 --- a/src/pages/BorrowPage.tsx +++ b/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 (
- - - + + {isV1 ? : } + {isV1 ? : }
) } diff --git a/src/pages/FarmPage.tsx b/src/pages/FarmPage.tsx index 4c6bcccd..8560e9da 100644 --- a/src/pages/FarmPage.tsx +++ b/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 (
- +
diff --git a/src/pages/HLSFarmPage.tsx b/src/pages/HLSFarmPage.tsx index 40e75b38..019adc78 100644 --- a/src/pages/HLSFarmPage.tsx +++ b/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() { diff --git a/src/pages/HLSStakingPage.tsx b/src/pages/HLSStakingPage.tsx index 3aeac7c8..228b070b 100644 --- a/src/pages/HLSStakingPage.tsx +++ b/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() { diff --git a/src/pages/LendPage.tsx b/src/pages/LendPage.tsx index 81a15210..63dab120 100644 --- a/src/pages/LendPage.tsx +++ b/src/pages/LendPage.tsx @@ -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 (
- - {chainConfig.farm && } - - + + {isV1 ? : } + {isV1 ? : }
) } diff --git a/src/pages/PortfolioPage.tsx b/src/pages/PortfolioPage.tsx index 6e7269c2..8094552e 100644 --- a/src/pages/PortfolioPage.tsx +++ b/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 (
+ {address && }
diff --git a/src/pages/V1Page.tsx b/src/pages/V1Page.tsx deleted file mode 100644 index f6fb5330..00000000 --- a/src/pages/V1Page.tsx +++ /dev/null @@ -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 ( -
- - - {address && } - - -
- ) -} diff --git a/tailwind.config.js b/tailwind.config.js index 1bc2f416..321717d1 100644 --- a/tailwind.config.js +++ b/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',