diff --git a/.changeset/lovely-singers-allow.md b/.changeset/lovely-singers-allow.md new file mode 100644 index 0000000000..eb248551dc --- /dev/null +++ b/.changeset/lovely-singers-allow.md @@ -0,0 +1,5 @@ +--- +"@venusprotocol/evm": patch +--- + +remove newAccountPage feature flag diff --git a/apps/evm/src/hooks/useIsFeatureEnabled/index.tsx b/apps/evm/src/hooks/useIsFeatureEnabled/index.tsx index 550c195618..b4cc320d2e 100644 --- a/apps/evm/src/hooks/useIsFeatureEnabled/index.tsx +++ b/apps/evm/src/hooks/useIsFeatureEnabled/index.tsx @@ -129,23 +129,6 @@ export const featureFlags = { ChainId.UNICHAIN_MAINNET, ChainId.UNICHAIN_SEPOLIA, ], - newAccountPage: [ - ChainId.BSC_MAINNET, - ChainId.BSC_TESTNET, - ChainId.OPBNB_MAINNET, - ChainId.ETHEREUM, - ChainId.SEPOLIA, - ChainId.ARBITRUM_ONE, - ChainId.ARBITRUM_SEPOLIA, - ChainId.ZKSYNC_SEPOLIA, - ChainId.ZKSYNC_MAINNET, - ChainId.OPTIMISM_SEPOLIA, - ChainId.OPTIMISM_MAINNET, - ChainId.BASE_MAINNET, - ChainId.BASE_SEPOLIA, - ChainId.UNICHAIN_MAINNET, - ChainId.UNICHAIN_SEPOLIA, - ], eMode: [ ChainId.BSC_TESTNET, ChainId.OPBNB_TESTNET, diff --git a/apps/evm/src/pages/Account/AccountPlaceholder/index.tsx b/apps/evm/src/pages/Account/AccountPlaceholder/index.tsx deleted file mode 100644 index 31e048029c..0000000000 --- a/apps/evm/src/pages/Account/AccountPlaceholder/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ButtonWrapper } from 'components'; -import { Link } from 'containers/Link'; -import { useGetHomePagePath } from 'hooks/useGetHomePagePath'; -import { useTranslation } from 'libs/translations'; - -const AccountPlaceholder: React.FC = () => { - const { t } = useTranslation(); - const { homePagePath } = useGetHomePagePath(); - - return ( -
-

{t('accountPlaceholder.assetsWillAppearHere')}

- - - - {t('accountPlaceholder.letsGetStarted')} - - -
- ); -}; - -export default AccountPlaceholder; diff --git a/apps/evm/src/pages/Account/NewPage/index.tsx b/apps/evm/src/pages/Account/NewPage/index.tsx deleted file mode 100644 index 0718943e74..0000000000 --- a/apps/evm/src/pages/Account/NewPage/index.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { - useGetPools, - useGetTokenUsdPrice, - useGetUserVaiBorrowBalance, - useGetVaiRepayApr, - useGetVaults, -} from 'clients/api'; -import { Page, Spinner } from 'components'; -import { NULL_ADDRESS } from 'constants/address'; -import { useGetUserPrimeInfo } from 'hooks/useGetUserPrimeInfo'; -import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; -import type { Tab } from 'hooks/useTabs'; -import { useGetToken } from 'libs/tokens'; -import { useTranslation } from 'libs/translations'; -import { useAccountAddress } from 'libs/wallet'; -import { convertDollarsToCents } from 'utilities'; -import { Settings } from '../Settings'; -import { useExtractData } from '../useExtractData'; -import { PerformanceChart } from './PerformanceChart'; -import { Pools } from './Pools'; -import { PrimeBanner } from './PrimeBanner'; -import { Summary } from './Summary'; -import { Tabs } from './Tabs'; -import { Vaults } from './Vaults'; - -export const NewPage: React.FC = () => { - const { t } = useTranslation(); - - const isPrimeFeatureEnabled = useIsFeatureEnabled({ - name: 'prime', - }); - const isGaslessTransactionsFeatureEnabled = useIsFeatureEnabled({ name: 'gaslessTransactions' }); - - const { accountAddress } = useAccountAddress(); - const { data: getPoolsData, isLoading: isGetPoolsLoading } = useGetPools({ - accountAddress, - }); - const pools = getPoolsData?.pools || []; - - const { data: getVaultsData, isLoading: isGetVaultsLoading } = useGetVaults({ - accountAddress, - }); - const vaults = getVaultsData || []; - - const xvs = useGetToken({ - symbol: 'XVS', - }); - const { data: getXvsUsdPriceData, isLoading: isGetXvsUsdPriceLoading } = useGetTokenUsdPrice({ - token: xvs, - }); - const xvsPriceCents = - getXvsUsdPriceData && convertDollarsToCents(getXvsUsdPriceData.tokenPriceUsd); - - const vai = useGetToken({ - symbol: 'VAI', - }); - const { data: getVaiUsdPriceData, isLoading: isGetVaiUsdPriceLoading } = useGetTokenUsdPrice({ - token: vai, - }); - const vaiPriceCents = - getVaiUsdPriceData && convertDollarsToCents(getVaiUsdPriceData.tokenPriceUsd); - - const { data: getVaiRepayAprData } = useGetVaiRepayApr(); - const vaiBorrowAprPercentage = getVaiRepayAprData?.repayAprPercentage; - - const { data: getUserVaiBorrowBalanceData, isLoading: isGetUserVaiBorrowBalanceLoading } = - useGetUserVaiBorrowBalance( - { - accountAddress: accountAddress || NULL_ADDRESS, - }, - { - enabled: !!accountAddress, - }, - ); - const userVaiBorrowBalanceMantissa = getUserVaiBorrowBalanceData?.userVaiBorrowBalanceMantissa; - - const { - isLoading: isGetUserPrimeInfoLoading, - data: { - isUserPrime, - userHighestPrimeSimulationApyBoostPercentage: primeBoostPercentage, - primeTokenLimit, - claimedPrimeTokenCount, - userClaimTimeRemainingSeconds, - userStakedXvsTokens, - minXvsToStakeForPrimeTokens, - }, - } = useGetUserPrimeInfo({ accountAddress }); - - const { totalSupplyCents, totalBorrowCents, totalVaultStakeCents, totalVaiBorrowBalanceCents } = - useExtractData({ - pools, - vaults, - xvsPriceCents, - vaiPriceCents, - vai, - userVaiBorrowBalanceMantissa, - }); - - const canUserBecomePrime = - // Check there's Prime tokens left to claim - typeof primeTokenLimit === 'number' && - typeof claimedPrimeTokenCount === 'number' && - primeTokenLimit - claimedPrimeTokenCount > 0 && - // Check user is staking enough XVS - userStakedXvsTokens.isGreaterThanOrEqualTo(minXvsToStakeForPrimeTokens) && - // Check users has staked XVS for long enough - typeof userClaimTimeRemainingSeconds === 'number' && - userClaimTimeRemainingSeconds <= 0; - - const tabs: Tab[] = [ - { - title: t('account.tabs.pools'), - id: 'pools', - content: , - }, - { - title: t('account.tabs.vaults'), - id: 'vaults', - content: , - }, - ]; - - if (isGaslessTransactionsFeatureEnabled) { - tabs.push({ - title: t('account.tabs.settings'), - id: 'settings', - content: , - }); - } - - const netWorthCents = totalSupplyCents - .plus(totalVaultStakeCents || 0) - .minus(totalBorrowCents) - .minus(totalVaiBorrowBalanceCents || 0) - .toNumber(); - - const isFetching = - isGetPoolsLoading || - isGetVaultsLoading || - isGetXvsUsdPriceLoading || - isGetVaiUsdPriceLoading || - isGetUserVaiBorrowBalanceLoading || - isGetUserPrimeInfoLoading; - - if (isFetching) { - return ; - } - - return ( - - {isPrimeFeatureEnabled && !isUserPrime && primeBoostPercentage && ( - - )} - -
- - - -
- - -
- ); -}; diff --git a/apps/evm/src/pages/Account/OldPage/AccountBreakdown/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/OldPage/AccountBreakdown/__snapshots__/index.spec.tsx.snap deleted file mode 100644 index faeb5bd82d..0000000000 --- a/apps/evm/src/pages/Account/OldPage/AccountBreakdown/__snapshots__/index.spec.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Account > displays page when there are positions 1`] = `"SummaryNet APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33$233VaultsStakedAssetAPRStakesorted descendingXVS12.92%233 XVSSort byStakeXVSAPR12.92%Stake233 XVSPoolsVenusMetaverseHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`; diff --git a/apps/evm/src/pages/Account/OldPage/AccountBreakdown/index.spec.tsx b/apps/evm/src/pages/Account/OldPage/AccountBreakdown/index.spec.tsx deleted file mode 100644 index a912a1c57c..0000000000 --- a/apps/evm/src/pages/Account/OldPage/AccountBreakdown/index.spec.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { waitFor } from '@testing-library/dom'; -import BigNumber from 'bignumber.js'; -import type { Mock } from 'vitest'; - -import fakeAccountAddress from '__mocks__/models/address'; -import { poolData } from '__mocks__/models/pools'; -import { vaults } from '__mocks__/models/vaults'; -import { useGetPools, useGetVaults } from 'clients/api'; -import { en } from 'libs/translations'; -import { renderComponent } from 'testUtils/render'; -import Account from '.'; - -describe('Account', () => { - it('renders without crashing', () => { - renderComponent(); - }); - - it('displays AccountPlaceholder when there are no positions', async () => { - (useGetVaults as Mock).mockImplementation(() => ({ - isLoading: false, - data: vaults.map(({ userStakedMantissa: _, ...vault }) => vault), - })); - - (useGetPools as Mock).mockImplementation(() => ({ - isLoading: false, - data: { - pools: poolData.map(pool => ({ - ...pool, - userBorrowLimitCents: new BigNumber(0), - userBorrowBalanceCents: new BigNumber(0), - userSupplyBalanceCents: new BigNumber(0), - assets: pool.assets.map(asset => ({ - ...asset, - userBorrowBalanceCents: new BigNumber(0), - userBorrowBalanceTokens: new BigNumber(0), - userSupplyBalanceCents: new BigNumber(0), - userSupplyBalanceTokens: new BigNumber(0), - userWalletBalanceCents: new BigNumber(0), - userWalletBalanceTokens: new BigNumber(0), - isCollateralOfUser: false, - })), - })), - }, - })); - - const { getByText } = renderComponent(, { - accountAddress: fakeAccountAddress, - }); - - await waitFor(() => - expect(getByText(en.accountPlaceholder.assetsWillAppearHere)).toBeInTheDocument(), - ); - }); - - it('displays page when there are positions', async () => { - const { container } = renderComponent(, { - accountAddress: fakeAccountAddress, - }); - - await waitFor(() => expect(container.textContent).toBeTruthy()); - - expect(container.textContent).toMatchSnapshot(); - }); -}); diff --git a/apps/evm/src/pages/Account/OldPage/AccountBreakdown/index.tsx b/apps/evm/src/pages/Account/OldPage/AccountBreakdown/index.tsx deleted file mode 100644 index c89586eb51..0000000000 --- a/apps/evm/src/pages/Account/OldPage/AccountBreakdown/index.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { useMemo } from 'react'; - -import { useGetPools, useGetTokenUsdPrice, useGetVaults } from 'clients/api'; -import { Spinner } from 'components'; -import { useGetToken } from 'libs/tokens'; -import { useAccountAddress } from 'libs/wallet'; - -import BigNumber from 'bignumber.js'; -import { useConvertDollarsToCents } from 'hooks/useConvertDollarsToCents'; -import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; -import { useTranslation } from 'libs/translations'; -import { Settings } from 'pages/Account/Settings'; -import AccountPlaceholder from '../../AccountPlaceholder'; -import { PoolPositions } from '../../PoolPositions'; -import { PoolSummary } from '../../PoolSummary'; -import { Section } from '../../Section'; -import VaultsBreakdown from '../../VaultsBreakdown'; - -const Account: React.FC = () => { - const { t } = useTranslation(); - const { accountAddress } = useAccountAddress(); - const isGaslessTransactionsFeatureEnabled = useIsFeatureEnabled({ name: 'gaslessTransactions' }); - const { data: getPoolsData, isLoading: isGetPoolsLoading } = useGetPools({ - accountAddress, - }); - const pools = getPoolsData?.pools || []; - - const { data: getVaultsData, isLoading: isGetVaultsLoading } = useGetVaults({ - accountAddress, - }); - const vaults = getVaultsData || []; - - const xvs = useGetToken({ - symbol: 'XVS', - }); - const { data: getXvsUsdPriceData, isLoading: isGetXvsUsdPriceLoading } = useGetTokenUsdPrice({ - token: xvs, - }); - const xvsPriceCents = useConvertDollarsToCents({ - value: getXvsUsdPriceData?.tokenPriceUsd || new BigNumber(0), - }); - - const vai = useGetToken({ - symbol: 'VAI', - }); - const { data: getVaiUsdPriceData, isLoading: isGetVaiUsdPriceLoading } = useGetTokenUsdPrice({ - token: vai, - }); - const vaiPriceCents = useConvertDollarsToCents({ - value: getVaiUsdPriceData?.tokenPriceUsd || new BigNumber(0), - }); - - const isFetching = - isGetPoolsLoading || isGetVaultsLoading || isGetXvsUsdPriceLoading || isGetVaiUsdPriceLoading; - - // Filter out vaults user has not staked in - const filteredVaults = useMemo( - () => vaults.filter(vault => vault.userStakedMantissa?.isGreaterThan(0)), - [vaults], - ); - - // Filter out pools user has not supplied in or borrowed from, unless they have assets enabled as - // collateral in that pool - const filteredPools = useMemo( - () => - pools.filter(pool => - pool.assets.some( - asset => - asset.userSupplyBalanceTokens.isGreaterThan(0) || - asset.userBorrowBalanceTokens.isGreaterThan(0) || - asset.isCollateralOfUser, - ), - ), - [pools], - ); - - if (isFetching) { - return ; - } - - const hasPositions = filteredPools.length > 0 || filteredVaults.length > 0; - - if (!hasPositions) { - return ; - } - - return ( -
- {isGaslessTransactionsFeatureEnabled && ( -
- -
- )} - - - - {filteredVaults.length > 0 && } - - {filteredPools.length > 0 && ( -
- -
- )} -
- ); -}; - -export default Account; diff --git a/apps/evm/src/pages/Account/OldPage/index.tsx b/apps/evm/src/pages/Account/OldPage/index.tsx deleted file mode 100644 index 11faf0e713..0000000000 --- a/apps/evm/src/pages/Account/OldPage/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import PrimeStatusBanner from 'containers/PrimeStatusBanner'; -import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; - -import { Page } from 'components'; -import AccountBreakdown from './AccountBreakdown'; - -export const OldPage: React.FC = () => { - const isPrimeEnabled = useIsFeatureEnabled({ name: 'prime' }); - - return ( - -
- {isPrimeEnabled && } - - -
-
- ); -}; diff --git a/apps/evm/src/pages/Account/NewPage/PerformanceChart/DollarValueChange/index.tsx b/apps/evm/src/pages/Account/PerformanceChart/DollarValueChange/index.tsx similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PerformanceChart/DollarValueChange/index.tsx rename to apps/evm/src/pages/Account/PerformanceChart/DollarValueChange/index.tsx diff --git a/apps/evm/src/pages/Account/NewPage/PerformanceChart/formatToReadableAxisDate/index.ts b/apps/evm/src/pages/Account/PerformanceChart/formatToReadableAxisDate/index.ts similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PerformanceChart/formatToReadableAxisDate/index.ts rename to apps/evm/src/pages/Account/PerformanceChart/formatToReadableAxisDate/index.ts diff --git a/apps/evm/src/pages/Account/NewPage/PerformanceChart/formatToReadableTitleDate/index.tsx b/apps/evm/src/pages/Account/PerformanceChart/formatToReadableTitleDate/index.tsx similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PerformanceChart/formatToReadableTitleDate/index.tsx rename to apps/evm/src/pages/Account/PerformanceChart/formatToReadableTitleDate/index.tsx diff --git a/apps/evm/src/pages/Account/NewPage/PerformanceChart/index.tsx b/apps/evm/src/pages/Account/PerformanceChart/index.tsx similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PerformanceChart/index.tsx rename to apps/evm/src/pages/Account/PerformanceChart/index.tsx diff --git a/apps/evm/src/pages/Account/PoolPositions/__tests__/__snapshots__/index.eMode.spec.tsx.snap b/apps/evm/src/pages/Account/PoolPositions/__tests__/__snapshots__/index.eMode.spec.tsx.snap deleted file mode 100644 index 8e990b542c..0000000000 --- a/apps/evm/src/pages/Account/PoolPositions/__tests__/__snapshots__/index.eMode.spec.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`PoolPositions - Feature flag enabled: E-mode > displays E-mode banner correctly when user has enabled an E-mode group 1`] = `"VenusHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedE-mode: StablecoinsAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsE-mode: StablecoinsSuppliedBorrowedE-mode: StablecoinsAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`; diff --git a/apps/evm/src/pages/Account/PoolPositions/__tests__/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/PoolPositions/__tests__/__snapshots__/index.spec.tsx.snap deleted file mode 100644 index aa66d9e9cf..0000000000 --- a/apps/evm/src/pages/Account/PoolPositions/__tests__/__snapshots__/index.spec.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`PoolPositions > displays content correctly 1`] = `"VenusHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`; diff --git a/apps/evm/src/pages/Account/PoolSummary/__tests__/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/PoolSummary/__tests__/__snapshots__/index.spec.tsx.snap deleted file mode 100644 index e304a9fd5b..0000000000 --- a/apps/evm/src/pages/Account/PoolSummary/__tests__/__snapshots__/index.spec.tsx.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`PoolSummary > displays account health prop and displayAccountHealth prop as true 1`] = `"Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Borrow limit used:6.4%Limit:$1.92K.Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Borrow limit used:6.4%Limit:$1.92K.Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Borrow limit used:6.4%Limit:$1.92K."`; - -exports[`PoolSummary > displays health factor when passing displayHealthFactor prop as true 1`] = `"Health factor15.62Net APY0%Daily earnings$0.06Total supply$1.23MTotal borrow$123.33Health factor15.62Net APY0%Daily earnings$0.06Total supply$1.23MTotal borrow$123.33Health factor15.62Net APY0%Daily earnings$0.06Total supply$1.23M$123.33"`; - -exports[`PoolSummary > displays stats correctly 1`] = `"Net APY0%Daily earnings$0.06Total supply$1.23MTotal borrow$123.33Net APY0%Daily earnings$0.06Total supply$1.23MTotal borrow$123.33Net APY0%Daily earnings$0.06Total supply$1.23M$123.33"`; diff --git a/apps/evm/src/pages/Account/PoolSummary/__tests__/index.spec.tsx b/apps/evm/src/pages/Account/PoolSummary/__tests__/index.spec.tsx deleted file mode 100644 index ca44eb560c..0000000000 --- a/apps/evm/src/pages/Account/PoolSummary/__tests__/index.spec.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import BigNumber from 'bignumber.js'; - -import { poolData } from '__mocks__/models/pools'; -import { vaults } from '__mocks__/models/vaults'; -import { renderComponent } from 'testUtils/render'; - -import { PoolSummary } from '..'; - -describe('PoolSummary', () => { - it('renders without crashing', () => { - renderComponent(); - }); - - it('displays stats correctly', () => { - const { container } = renderComponent(); - - expect(container.textContent).toMatchSnapshot(); - }); - - it('displays account health prop and displayAccountHealth prop as true', () => { - const { container } = renderComponent( - , - ); - - expect(container.textContent).toMatchSnapshot(); - }); - - it('displays health factor when passing displayHealthFactor prop as true', () => { - const { container } = renderComponent(); - - expect(container.textContent).toMatchSnapshot(); - }); -}); diff --git a/apps/evm/src/pages/Account/PoolSummary/index.tsx b/apps/evm/src/pages/Account/Pools/Positions/Summary/index.tsx similarity index 94% rename from apps/evm/src/pages/Account/PoolSummary/index.tsx rename to apps/evm/src/pages/Account/Pools/Positions/Summary/index.tsx index 8462b7cd8d..30f021b4b6 100644 --- a/apps/evm/src/pages/Account/PoolSummary/index.tsx +++ b/apps/evm/src/pages/Account/Pools/Positions/Summary/index.tsx @@ -9,11 +9,11 @@ import { formatHealthFactorToReadableValue, formatPercentageToReadableValue, } from 'utilities'; -import Section from '../Section'; -import { useExtractData } from '../useExtractData'; +import Section from '../../../Section'; +import { useExtractData } from '../../../useExtractData'; -export interface PoolSummaryProps { - pools: Pool[]; +export interface SummaryProps { + pool: Pool; vaults?: Vault[]; title?: string; xvsPriceCents?: BigNumber; @@ -23,8 +23,8 @@ export interface PoolSummaryProps { className?: string; } -export const PoolSummary: React.FC = ({ - pools, +export const Summary: React.FC = ({ + pool, vaults, title, displayHealthFactor = false, @@ -44,7 +44,7 @@ export const PoolSummary: React.FC = ({ totalBorrowLimitCents, totalVaultStakeCents, } = useExtractData({ - pools, + pools: [pool], vaults, xvsPriceCents, vaiPriceCents, diff --git a/apps/evm/src/pages/Account/PoolPositions/Tables/EModeHeader/index.tsx b/apps/evm/src/pages/Account/Pools/Positions/Tables/EModeHeader/index.tsx similarity index 98% rename from apps/evm/src/pages/Account/PoolPositions/Tables/EModeHeader/index.tsx rename to apps/evm/src/pages/Account/Pools/Positions/Tables/EModeHeader/index.tsx index 33eb57c2fe..008b509c6b 100644 --- a/apps/evm/src/pages/Account/PoolPositions/Tables/EModeHeader/index.tsx +++ b/apps/evm/src/pages/Account/Pools/Positions/Tables/EModeHeader/index.tsx @@ -28,8 +28,6 @@ export const EModeHeader: React.FC = ({ }, }); - console.log('rendered'); - return ( = ({ pool }) => { +export const TagContent: React.FC = ({ pool }) => { const { t } = useTranslation(); const borrowLimitUsedPercentage = diff --git a/apps/evm/src/pages/Account/Pools/Positions/__tests__/__snapshots__/index.eMode.spec.tsx.snap b/apps/evm/src/pages/Account/Pools/Positions/__tests__/__snapshots__/index.eMode.spec.tsx.snap new file mode 100644 index 0000000000..14a4c52e7b --- /dev/null +++ b/apps/evm/src/pages/Account/Pools/Positions/__tests__/__snapshots__/index.eMode.spec.tsx.snap @@ -0,0 +1,3 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Positions - Feature flag enabled: E-mode > displays E-mode banner correctly when user has enabled an E-mode group 1`] = `"VenusHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedE-mode: StablecoinsAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsE-mode: StablecoinsSuppliedBorrowedE-mode: StablecoinsAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`; diff --git a/apps/evm/src/pages/Account/Pools/Positions/__tests__/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/Pools/Positions/__tests__/__snapshots__/index.spec.tsx.snap new file mode 100644 index 0000000000..725a56f708 --- /dev/null +++ b/apps/evm/src/pages/Account/Pools/Positions/__tests__/__snapshots__/index.spec.tsx.snap @@ -0,0 +1,3 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Positions > displays content correctly 1`] = `"VenusHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`; diff --git a/apps/evm/src/pages/Account/PoolPositions/__tests__/index.eMode.spec.tsx b/apps/evm/src/pages/Account/Pools/Positions/__tests__/index.eMode.spec.tsx similarity index 81% rename from apps/evm/src/pages/Account/PoolPositions/__tests__/index.eMode.spec.tsx rename to apps/evm/src/pages/Account/Pools/Positions/__tests__/index.eMode.spec.tsx index c110ae28f0..9604d0db07 100644 --- a/apps/evm/src/pages/Account/PoolPositions/__tests__/index.eMode.spec.tsx +++ b/apps/evm/src/pages/Account/Pools/Positions/__tests__/index.eMode.spec.tsx @@ -5,14 +5,14 @@ import { poolData } from '__mocks__/models/pools'; import { type UseIsFeatureEnabledInput, useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; import { renderComponent } from 'testUtils/render'; import type { Pool } from 'types'; -import { PoolPositions } from '..'; +import { Positions } from '..'; const fakePool: Pool = { ...poolData[0], userEModeGroup: poolData[0].eModeGroups[0], }; -describe('PoolPositions - Feature flag enabled: E-mode', () => { +describe('Positions - Feature flag enabled: E-mode', () => { beforeEach(() => { (useIsFeatureEnabled as Mock).mockImplementation( ({ name }: UseIsFeatureEnabledInput) => name === 'eMode', @@ -20,7 +20,7 @@ describe('PoolPositions - Feature flag enabled: E-mode', () => { }); it('displays E-mode banner correctly when user has enabled an E-mode group', async () => { - const { container } = renderComponent(); + const { container } = renderComponent(); await waitFor(() => expect(container.textContent).not.toEqual('')); expect(container.textContent).toMatchSnapshot(); diff --git a/apps/evm/src/pages/Account/PoolPositions/__tests__/index.spec.tsx b/apps/evm/src/pages/Account/Pools/Positions/__tests__/index.spec.tsx similarity index 68% rename from apps/evm/src/pages/Account/PoolPositions/__tests__/index.spec.tsx rename to apps/evm/src/pages/Account/Pools/Positions/__tests__/index.spec.tsx index 292f72fef1..c2b0b5f856 100644 --- a/apps/evm/src/pages/Account/PoolPositions/__tests__/index.spec.tsx +++ b/apps/evm/src/pages/Account/Pools/Positions/__tests__/index.spec.tsx @@ -3,11 +3,11 @@ import { waitFor } from '@testing-library/react'; import { poolData } from '__mocks__/models/pools'; import { renderComponent } from 'testUtils/render'; -import { PoolPositions } from '..'; +import { Positions } from '..'; -describe('PoolPositions', () => { +describe('Positions', () => { it('displays content correctly', async () => { - const { container } = renderComponent(); + const { container } = renderComponent(); await waitFor(() => expect(container.textContent).not.toEqual('')); expect(container.textContent).toMatchSnapshot(); diff --git a/apps/evm/src/pages/Account/PoolPositions/index.tsx b/apps/evm/src/pages/Account/Pools/Positions/index.tsx similarity index 77% rename from apps/evm/src/pages/Account/PoolPositions/index.tsx rename to apps/evm/src/pages/Account/Pools/Positions/index.tsx index 663ba0c40a..33649f08fa 100644 --- a/apps/evm/src/pages/Account/PoolPositions/index.tsx +++ b/apps/evm/src/pages/Account/Pools/Positions/index.tsx @@ -4,17 +4,17 @@ import { useMemo, useState } from 'react'; import { type Tag, TagGroup } from 'components'; import type { Pool } from 'types'; -import { PoolSummary } from '../PoolSummary'; -import { PoolTagContent } from './PoolTagContent'; +import { Summary } from './Summary'; import Tables from './Tables'; +import { TagContent } from './TagContent'; import { useStyles } from './styles'; -export interface PoolPositionsProps { +export interface PositionsProps { pools: Pool[]; className?: string; } -export const PoolPositions: React.FC = ({ pools, className }) => { +export const Positions: React.FC = ({ pools, className }) => { const styles = useStyles(); const [selectedPoolIndex, setSelectedPoolIndex] = useState(0); const selectedPool = pools[selectedPoolIndex]; @@ -23,7 +23,7 @@ export const PoolPositions: React.FC = ({ pools, className } () => pools.map(pool => ({ id: pool.comptrollerAddress, - content: , + content: , })), [pools], ); @@ -41,8 +41,8 @@ export const PoolPositions: React.FC = ({ pools, className } /> )} - = ({ pools }) => { ); } - return ; + return ; }; diff --git a/apps/evm/src/pages/Account/NewPage/PrimeBanner/__tests__/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/PrimeBanner/__tests__/__snapshots__/index.spec.tsx.snap similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PrimeBanner/__tests__/__snapshots__/index.spec.tsx.snap rename to apps/evm/src/pages/Account/PrimeBanner/__tests__/__snapshots__/index.spec.tsx.snap diff --git a/apps/evm/src/pages/Account/NewPage/PrimeBanner/__tests__/index.spec.tsx b/apps/evm/src/pages/Account/PrimeBanner/__tests__/index.spec.tsx similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PrimeBanner/__tests__/index.spec.tsx rename to apps/evm/src/pages/Account/PrimeBanner/__tests__/index.spec.tsx diff --git a/apps/evm/src/pages/Account/NewPage/PrimeBanner/index.tsx b/apps/evm/src/pages/Account/PrimeBanner/index.tsx similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PrimeBanner/index.tsx rename to apps/evm/src/pages/Account/PrimeBanner/index.tsx diff --git a/apps/evm/src/pages/Account/NewPage/PrimeBanner/store/__tests__/index.spec.ts b/apps/evm/src/pages/Account/PrimeBanner/store/__tests__/index.spec.ts similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PrimeBanner/store/__tests__/index.spec.ts rename to apps/evm/src/pages/Account/PrimeBanner/store/__tests__/index.spec.ts diff --git a/apps/evm/src/pages/Account/NewPage/PrimeBanner/store/index.ts b/apps/evm/src/pages/Account/PrimeBanner/store/index.ts similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PrimeBanner/store/index.ts rename to apps/evm/src/pages/Account/PrimeBanner/store/index.ts diff --git a/apps/evm/src/pages/Account/NewPage/PrimeBanner/testIds.ts b/apps/evm/src/pages/Account/PrimeBanner/testIds.ts similarity index 100% rename from apps/evm/src/pages/Account/NewPage/PrimeBanner/testIds.ts rename to apps/evm/src/pages/Account/PrimeBanner/testIds.ts diff --git a/apps/evm/src/pages/Account/NewPage/Summary/circularGradient.svg b/apps/evm/src/pages/Account/Summary/circularGradient.svg similarity index 100% rename from apps/evm/src/pages/Account/NewPage/Summary/circularGradient.svg rename to apps/evm/src/pages/Account/Summary/circularGradient.svg diff --git a/apps/evm/src/pages/Account/NewPage/Summary/index.tsx b/apps/evm/src/pages/Account/Summary/index.tsx similarity index 98% rename from apps/evm/src/pages/Account/NewPage/Summary/index.tsx rename to apps/evm/src/pages/Account/Summary/index.tsx index 6eb1775e27..07b10977ac 100644 --- a/apps/evm/src/pages/Account/NewPage/Summary/index.tsx +++ b/apps/evm/src/pages/Account/Summary/index.tsx @@ -5,7 +5,7 @@ import { useGetToken } from 'libs/tokens'; import { useTranslation } from 'libs/translations'; import type { Pool, Vault } from 'types'; import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities'; -import { useExtractData } from '../../useExtractData'; +import { useExtractData } from '../useExtractData'; import circularGradientSrc from './circularGradient.svg'; export interface SummaryProps { diff --git a/apps/evm/src/pages/Account/NewPage/Tabs/index.tsx b/apps/evm/src/pages/Account/Tabs/index.tsx similarity index 100% rename from apps/evm/src/pages/Account/NewPage/Tabs/index.tsx rename to apps/evm/src/pages/Account/Tabs/index.tsx diff --git a/apps/evm/src/pages/Account/NewPage/Vaults/__tests__/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/Vaults/__tests__/__snapshots__/index.spec.tsx.snap similarity index 100% rename from apps/evm/src/pages/Account/NewPage/Vaults/__tests__/__snapshots__/index.spec.tsx.snap rename to apps/evm/src/pages/Account/Vaults/__tests__/__snapshots__/index.spec.tsx.snap diff --git a/apps/evm/src/pages/Account/NewPage/Vaults/__tests__/index.spec.tsx b/apps/evm/src/pages/Account/Vaults/__tests__/index.spec.tsx similarity index 100% rename from apps/evm/src/pages/Account/NewPage/Vaults/__tests__/index.spec.tsx rename to apps/evm/src/pages/Account/Vaults/__tests__/index.spec.tsx diff --git a/apps/evm/src/pages/Account/NewPage/Vaults/index.tsx b/apps/evm/src/pages/Account/Vaults/index.tsx similarity index 95% rename from apps/evm/src/pages/Account/NewPage/Vaults/index.tsx rename to apps/evm/src/pages/Account/Vaults/index.tsx index 3efea3e5b3..4290f94f06 100644 --- a/apps/evm/src/pages/Account/NewPage/Vaults/index.tsx +++ b/apps/evm/src/pages/Account/Vaults/index.tsx @@ -2,7 +2,7 @@ import { routes } from 'constants/routing'; import { Vault } from 'containers/Vault'; import { useTranslation } from 'libs/translations'; import type { Vault as VaultType } from 'types'; -import { Placeholder } from '../../Placeholder'; +import { Placeholder } from '../Placeholder'; export interface VaultsProps { vaults: VaultType[]; diff --git a/apps/evm/src/pages/Account/VaultsBreakdown/Table/index.tsx b/apps/evm/src/pages/Account/VaultsBreakdown/Table/index.tsx deleted file mode 100644 index 38a0938dfe..0000000000 --- a/apps/evm/src/pages/Account/VaultsBreakdown/Table/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import BigNumber from 'bignumber.js'; -import { useMemo } from 'react'; - -import { Table, type TableProps, TokenIconWithSymbol } from 'components'; -import { routes } from 'constants/routing'; -import { useTranslation } from 'libs/translations'; -import type { Vault } from 'types'; -import { - compareBigNumbers, - compareNumbers, - convertMantissaToTokens, - formatPercentageToReadableValue, -} from 'utilities'; - -import { useStyles } from './styles'; - -export interface VaultTableProps { - vaults: Vault[]; -} - -export const VaultTable: React.FC = ({ vaults }) => { - const { t } = useTranslation(); - const styles = useStyles(); - - const tableColumns: TableProps['columns'] = useMemo( - () => [ - { - key: 'asset', - label: t('account.vaultsBreakdown.table.column.asset'), - selectOptionLabel: t('account.vaultsBreakdown.table.column.asset'), - renderCell: vault => , - }, - { - key: 'apr', - label: t('account.vaultsBreakdown.table.column.apr'), - selectOptionLabel: t('account.vaultsBreakdown.table.column.apr'), - renderCell: vault => formatPercentageToReadableValue(vault.stakingAprPercentage), - sortRows: (rowA, rowB, direction) => - compareNumbers(rowA.stakingAprPercentage, rowB.stakingAprPercentage, direction), - }, - { - key: 'stake', - label: t('account.vaultsBreakdown.table.column.stake'), - selectOptionLabel: t('account.vaultsBreakdown.table.column.stake'), - renderCell: vault => - convertMantissaToTokens({ - value: new BigNumber(vault.userStakedMantissa || 0), - token: vault.stakedToken, - - returnInReadableFormat: true, - addSymbol: true, - }), - sortRows: (rowA, rowB, direction) => - compareBigNumbers(rowA.userStakedMantissa, rowB.userStakedMantissa, direction), - }, - ], - [t], - ); - - return ( - - `account-vaults-breakdown-table-item-${row.stakedToken.address}-${ - row.rewardToken.address - }-${row.poolIndex || 0}-${row.lockingPeriodMs || 0}` - } - initialOrder={{ - orderBy: tableColumns[2], // Order by stake initially - orderDirection: 'desc', - }} - getRowHref={() => routes.vaults.path} - breakpoint="xs" - /> - ); -}; - -export default VaultTable; diff --git a/apps/evm/src/pages/Account/VaultsBreakdown/Table/styles.ts b/apps/evm/src/pages/Account/VaultsBreakdown/Table/styles.ts deleted file mode 100644 index a628ab5d44..0000000000 --- a/apps/evm/src/pages/Account/VaultsBreakdown/Table/styles.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { css } from '@emotion/react'; -import { useTheme } from '@mui/material'; - -export const useStyles = () => { - const theme = useTheme(); - - return { - table: css` - width: calc(50% - ${theme.spacing(3)}); - - ${theme.breakpoints.down('lg')} { - width: auto; - } - `, - }; -}; diff --git a/apps/evm/src/pages/Account/VaultsBreakdown/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/VaultsBreakdown/__snapshots__/index.spec.tsx.snap deleted file mode 100644 index 70054926e4..0000000000 --- a/apps/evm/src/pages/Account/VaultsBreakdown/__snapshots__/index.spec.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`pages/Account/VaultsBreakdown > displays content correctly 1`] = `"VaultsStakedAssetAPRStakesorted descendingVAI> 10,000%0 VAIXVS12.92%233 XVSSort byStakeVAIAPR> 10,000%Stake0 VAIXVSAPR12.92%Stake233 XVS"`; diff --git a/apps/evm/src/pages/Account/VaultsBreakdown/index.spec.tsx b/apps/evm/src/pages/Account/VaultsBreakdown/index.spec.tsx deleted file mode 100644 index 37940aa2d2..0000000000 --- a/apps/evm/src/pages/Account/VaultsBreakdown/index.spec.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { vaults } from '__mocks__/models/vaults'; -import { renderComponent } from 'testUtils/render'; - -import VaultsBreakdown from '.'; - -describe('pages/Account/VaultsBreakdown', () => { - it('renders without crashing', () => { - renderComponent(); - }); - - it('displays content correctly', () => { - const { container } = renderComponent(); - - expect(container.textContent).toMatchSnapshot(); - }); -}); diff --git a/apps/evm/src/pages/Account/VaultsBreakdown/index.tsx b/apps/evm/src/pages/Account/VaultsBreakdown/index.tsx deleted file mode 100644 index 6927a4777c..0000000000 --- a/apps/evm/src/pages/Account/VaultsBreakdown/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import { useTranslation } from 'libs/translations'; -import type { Vault } from 'types'; - -import Section from '../Section'; -import Table from './Table'; - -export interface VaultsBreakdownProps { - vaults: Vault[]; - className?: string; -} - -export const VaultsBreakdown: React.FC = ({ vaults, className }) => { - const { t } = useTranslation(); - - return ( -
-
- - ); -}; - -export default VaultsBreakdown; diff --git a/apps/evm/src/pages/Account/NewPage/__tests__/__snapshots__/index.spec.tsx.snap b/apps/evm/src/pages/Account/__tests__/__snapshots__/index.spec.tsx.snap similarity index 100% rename from apps/evm/src/pages/Account/NewPage/__tests__/__snapshots__/index.spec.tsx.snap rename to apps/evm/src/pages/Account/__tests__/__snapshots__/index.spec.tsx.snap diff --git a/apps/evm/src/pages/Account/NewPage/__tests__/index.prime.spec.tsx b/apps/evm/src/pages/Account/__tests__/index.prime.spec.tsx similarity index 89% rename from apps/evm/src/pages/Account/NewPage/__tests__/index.prime.spec.tsx rename to apps/evm/src/pages/Account/__tests__/index.prime.spec.tsx index b4064af9d3..646eb69f7b 100644 --- a/apps/evm/src/pages/Account/NewPage/__tests__/index.prime.spec.tsx +++ b/apps/evm/src/pages/Account/__tests__/index.prime.spec.tsx @@ -1,13 +1,14 @@ import { screen, waitFor } from '@testing-library/react'; import BigNumber from 'bignumber.js'; +import fakeAccountAddress from '__mocks__/models/address'; import { useGetUserVaiBorrowBalance, useGetVaiRepayApr } from 'clients/api'; import { useGetUserPrimeInfo } from 'hooks/useGetUserPrimeInfo'; import { type UseIsFeatureEnabledInput, useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; import { en } from 'libs/translations'; import { renderComponent } from 'testUtils/render'; import type { Mock } from 'vitest'; -import { NewPage } from '..'; +import { Account } from '..'; vi.mock('hooks/useGetUserPrimeInfo'); @@ -48,7 +49,9 @@ describe('Account - Feature flag enabled: Prime', () => { data: fakeUserPrimeInfo, })); - renderComponent(); + renderComponent(, { + accountAddress: fakeAccountAddress, + }); await waitFor(() => expect(screen.queryAllByText(en.account.primeBanner.button.stakeXvs).length).toBeGreaterThan( @@ -66,7 +69,9 @@ describe('Account - Feature flag enabled: Prime', () => { }, })); - renderComponent(); + renderComponent(, { + accountAddress: fakeAccountAddress, + }); await waitFor(() => expect( diff --git a/apps/evm/src/pages/Account/NewPage/__tests__/index.spec.tsx b/apps/evm/src/pages/Account/__tests__/index.spec.tsx similarity index 82% rename from apps/evm/src/pages/Account/NewPage/__tests__/index.spec.tsx rename to apps/evm/src/pages/Account/__tests__/index.spec.tsx index 1d550f58ba..9beaf8c035 100644 --- a/apps/evm/src/pages/Account/NewPage/__tests__/index.spec.tsx +++ b/apps/evm/src/pages/Account/__tests__/index.spec.tsx @@ -2,11 +2,12 @@ import { screen, waitFor } from '@testing-library/react'; import BigNumber from 'bignumber.js'; import type { Mock } from 'vitest'; +import fakeAccountAddress from '__mocks__/models/address'; import { useGetUserVaiBorrowBalance, useGetVaiRepayApr } from 'clients/api'; import { type UseIsFeatureEnabledInput, useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; import { en } from 'libs/translations'; import { renderComponent } from 'testUtils/render'; -import { NewPage } from '..'; +import { Account } from '..'; describe('Account', () => { beforeEach(() => { @@ -26,7 +27,9 @@ describe('Account', () => { }); it('displays content correctly', async () => { - const { container } = renderComponent(); + const { container } = renderComponent(, { + accountAddress: fakeAccountAddress, + }); await waitFor(() => expect(container.textContent).not.toBeFalsy()); @@ -38,7 +41,9 @@ describe('Account', () => { ({ name }: UseIsFeatureEnabledInput) => name === 'gaslessTransactions', ); - const { container } = renderComponent(); + const { container } = renderComponent(, { + accountAddress: fakeAccountAddress, + }); await waitFor(() => expect(container.textContent).not.toBeFalsy()); diff --git a/apps/evm/src/pages/Account/index.tsx b/apps/evm/src/pages/Account/index.tsx index 167be1cf9b..3927a94a3b 100644 --- a/apps/evm/src/pages/Account/index.tsx +++ b/apps/evm/src/pages/Account/index.tsx @@ -1,21 +1,187 @@ -import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; - +import { + useGetPools, + useGetTokenUsdPrice, + useGetUserVaiBorrowBalance, + useGetVaiRepayApr, + useGetVaults, +} from 'clients/api'; +import { Page, Spinner } from 'components'; +import { NULL_ADDRESS } from 'constants/address'; import { Redirect } from 'containers/Redirect'; import { useGetHomePagePath } from 'hooks/useGetHomePagePath'; +import { useGetUserPrimeInfo } from 'hooks/useGetUserPrimeInfo'; +import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled'; +import type { Tab } from 'hooks/useTabs'; +import { useGetToken } from 'libs/tokens'; +import { useTranslation } from 'libs/translations'; import { useAccountAddress } from 'libs/wallet'; -import { NewPage } from './NewPage'; -import { OldPage } from './OldPage'; +import { convertDollarsToCents } from 'utilities'; +import { PerformanceChart } from './PerformanceChart'; +import { Pools } from './Pools'; +import { PrimeBanner } from './PrimeBanner'; +import { Settings } from './Settings'; +import { Summary } from './Summary'; +import { Tabs } from './Tabs'; +import { Vaults } from './Vaults'; +import { useExtractData } from './useExtractData'; + +export const Account: React.FC = () => { + const { t } = useTranslation(); + + const isPrimeFeatureEnabled = useIsFeatureEnabled({ + name: 'prime', + }); + const isGaslessTransactionsFeatureEnabled = useIsFeatureEnabled({ name: 'gaslessTransactions' }); -const Account: React.FC = () => { - const { accountAddress } = useAccountAddress(); const { homePagePath } = useGetHomePagePath(); - const isNewAccountPageEnabled = useIsFeatureEnabled({ name: 'newAccountPage' }); + + const { accountAddress } = useAccountAddress(); + const { data: getPoolsData, isLoading: isGetPoolsLoading } = useGetPools({ + accountAddress, + }); + const pools = getPoolsData?.pools || []; + + const { data: getVaultsData, isLoading: isGetVaultsLoading } = useGetVaults({ + accountAddress, + }); + const vaults = getVaultsData || []; + + const xvs = useGetToken({ + symbol: 'XVS', + }); + const { data: getXvsUsdPriceData, isLoading: isGetXvsUsdPriceLoading } = useGetTokenUsdPrice({ + token: xvs, + }); + const xvsPriceCents = + getXvsUsdPriceData && convertDollarsToCents(getXvsUsdPriceData.tokenPriceUsd); + + const vai = useGetToken({ + symbol: 'VAI', + }); + const { data: getVaiUsdPriceData, isLoading: isGetVaiUsdPriceLoading } = useGetTokenUsdPrice({ + token: vai, + }); + const vaiPriceCents = + getVaiUsdPriceData && convertDollarsToCents(getVaiUsdPriceData.tokenPriceUsd); + + const { data: getVaiRepayAprData } = useGetVaiRepayApr(); + const vaiBorrowAprPercentage = getVaiRepayAprData?.repayAprPercentage; + + const { data: getUserVaiBorrowBalanceData, isLoading: isGetUserVaiBorrowBalanceLoading } = + useGetUserVaiBorrowBalance( + { + accountAddress: accountAddress || NULL_ADDRESS, + }, + { + enabled: !!accountAddress, + }, + ); + const userVaiBorrowBalanceMantissa = getUserVaiBorrowBalanceData?.userVaiBorrowBalanceMantissa; + + const { + isLoading: isGetUserPrimeInfoLoading, + data: { + isUserPrime, + userHighestPrimeSimulationApyBoostPercentage: primeBoostPercentage, + primeTokenLimit, + claimedPrimeTokenCount, + userClaimTimeRemainingSeconds, + userStakedXvsTokens, + minXvsToStakeForPrimeTokens, + }, + } = useGetUserPrimeInfo({ accountAddress }); + + const { totalSupplyCents, totalBorrowCents, totalVaultStakeCents, totalVaiBorrowBalanceCents } = + useExtractData({ + pools, + vaults, + xvsPriceCents, + vaiPriceCents, + vai, + userVaiBorrowBalanceMantissa, + }); + + const canUserBecomePrime = + // Check there's Prime tokens left to claim + typeof primeTokenLimit === 'number' && + typeof claimedPrimeTokenCount === 'number' && + primeTokenLimit - claimedPrimeTokenCount > 0 && + // Check user is staking enough XVS + userStakedXvsTokens.isGreaterThanOrEqualTo(minXvsToStakeForPrimeTokens) && + // Check users has staked XVS for long enough + typeof userClaimTimeRemainingSeconds === 'number' && + userClaimTimeRemainingSeconds <= 0; + + const tabs: Tab[] = [ + { + title: t('account.tabs.pools'), + id: 'pools', + content: , + }, + { + title: t('account.tabs.vaults'), + id: 'vaults', + content: , + }, + ]; + + if (isGaslessTransactionsFeatureEnabled) { + tabs.push({ + title: t('account.tabs.settings'), + id: 'settings', + content: , + }); + } + + const netWorthCents = totalSupplyCents + .plus(totalVaultStakeCents || 0) + .minus(totalBorrowCents) + .minus(totalVaiBorrowBalanceCents || 0) + .toNumber(); + + const isFetching = + isGetPoolsLoading || + isGetVaultsLoading || + isGetXvsUsdPriceLoading || + isGetVaiUsdPriceLoading || + isGetUserVaiBorrowBalanceLoading || + isGetUserPrimeInfoLoading; if (!accountAddress) { return ; } - return isNewAccountPageEnabled ? : ; + if (isFetching) { + return ; + } + + return ( + + {isPrimeFeatureEnabled && !isUserPrime && primeBoostPercentage && ( + + )} + +
+ + + +
+ + +
+ ); }; export default Account;