-
+ {displayAccountHealth && (
+
+
-
-
+
+
-
- {t('myAccount.safeLimit')}
-
+
+ {t('myAccount.safeLimit')}
+
-
- {readableSafeBorrowLimit}
-
+
+ {readableSafeBorrowLimit}
+
-
-
-
+
+
+
+
-
- )}
-
+ )}
+
+
);
};
diff --git a/src/pages/Account/Summary/styles.ts b/src/pages/Account/AccountBreakdown/Summary/styles.ts
similarity index 100%
rename from src/pages/Account/Summary/styles.ts
rename to src/pages/Account/AccountBreakdown/Summary/styles.ts
diff --git a/src/pages/Account/Summary/testIds.ts b/src/pages/Account/AccountBreakdown/Summary/testIds.ts
similarity index 100%
rename from src/pages/Account/Summary/testIds.ts
rename to src/pages/Account/AccountBreakdown/Summary/testIds.ts
diff --git a/src/pages/Account/Summary/useExtractData.ts b/src/pages/Account/AccountBreakdown/Summary/useExtractData.ts
similarity index 100%
rename from src/pages/Account/Summary/useExtractData.ts
rename to src/pages/Account/AccountBreakdown/Summary/useExtractData.ts
diff --git a/src/pages/Account/VaultsBreakdown/Table/index.tsx b/src/pages/Account/AccountBreakdown/VaultsBreakdown/Table/index.tsx
similarity index 100%
rename from src/pages/Account/VaultsBreakdown/Table/index.tsx
rename to src/pages/Account/AccountBreakdown/VaultsBreakdown/Table/index.tsx
diff --git a/src/pages/Account/VaultsBreakdown/Table/styles.ts b/src/pages/Account/AccountBreakdown/VaultsBreakdown/Table/styles.ts
similarity index 100%
rename from src/pages/Account/VaultsBreakdown/Table/styles.ts
rename to src/pages/Account/AccountBreakdown/VaultsBreakdown/Table/styles.ts
diff --git a/src/pages/Account/VaultsBreakdown/__snapshots__/index.spec.tsx.snap b/src/pages/Account/AccountBreakdown/VaultsBreakdown/__snapshots__/index.spec.tsx.snap
similarity index 100%
rename from src/pages/Account/VaultsBreakdown/__snapshots__/index.spec.tsx.snap
rename to src/pages/Account/AccountBreakdown/VaultsBreakdown/__snapshots__/index.spec.tsx.snap
diff --git a/src/pages/Account/VaultsBreakdown/index.spec.tsx b/src/pages/Account/AccountBreakdown/VaultsBreakdown/index.spec.tsx
similarity index 100%
rename from src/pages/Account/VaultsBreakdown/index.spec.tsx
rename to src/pages/Account/AccountBreakdown/VaultsBreakdown/index.spec.tsx
diff --git a/src/pages/Account/VaultsBreakdown/index.stories.tsx b/src/pages/Account/AccountBreakdown/VaultsBreakdown/index.stories.tsx
similarity index 100%
rename from src/pages/Account/VaultsBreakdown/index.stories.tsx
rename to src/pages/Account/AccountBreakdown/VaultsBreakdown/index.stories.tsx
diff --git a/src/pages/Account/VaultsBreakdown/index.tsx b/src/pages/Account/AccountBreakdown/VaultsBreakdown/index.tsx
similarity index 100%
rename from src/pages/Account/VaultsBreakdown/index.tsx
rename to src/pages/Account/AccountBreakdown/VaultsBreakdown/index.tsx
diff --git a/src/pages/Account/index.spec.tsx b/src/pages/Account/AccountBreakdown/index.spec.tsx
similarity index 100%
rename from src/pages/Account/index.spec.tsx
rename to src/pages/Account/AccountBreakdown/index.spec.tsx
diff --git a/src/pages/Account/index.stories.tsx b/src/pages/Account/AccountBreakdown/index.stories.tsx
similarity index 100%
rename from src/pages/Account/index.stories.tsx
rename to src/pages/Account/AccountBreakdown/index.stories.tsx
diff --git a/src/pages/Account/AccountBreakdown/index.tsx b/src/pages/Account/AccountBreakdown/index.tsx
new file mode 100644
index 0000000000..73eecb38e8
--- /dev/null
+++ b/src/pages/Account/AccountBreakdown/index.tsx
@@ -0,0 +1,122 @@
+/** @jsxImportSource @emotion/react */
+import BigNumber from 'bignumber.js';
+import { Spinner } from 'components';
+import React, { useMemo } from 'react';
+import { Pool, Vault } from 'types';
+import { areTokensEqual } from 'utilities';
+
+import { useGetPools, useGetVaults } from 'clients/api';
+import { useAuth } from 'context/AuthContext';
+import useGetToken from 'hooks/useGetToken';
+
+import { useStyles } from '../styles';
+import AccountPlaceholder from './AccountPlaceholder';
+import PoolsBreakdown from './PoolsBreakdown';
+import Summary from './Summary';
+import VaultsBreakdown from './VaultsBreakdown';
+
+export interface AccountUiProps {
+ pools: Pool[];
+ vaults: Vault[];
+ isFetching?: boolean;
+}
+
+// We assume 1 VAI = 1 dollar
+const VAI_PRICE_CENTS = new BigNumber(100);
+
+export const AccountUi: React.FC
= ({ isFetching, vaults, pools }) => {
+ const styles = useStyles();
+ const xvs = useGetToken({
+ symbol: 'XVS',
+ });
+
+ // Filter out vaults user has not staked in
+ const filteredVaults = useMemo(
+ () => vaults.filter(vault => vault.userStakedWei?.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],
+ );
+
+ const xvsPriceCents = useMemo(() => {
+ let priceCents = new BigNumber(0);
+
+ pools.forEach(pool =>
+ pool.assets.every(asset => {
+ if (xvs && areTokensEqual(asset.vToken.underlyingToken, xvs)) {
+ priceCents = asset.tokenPriceCents;
+ return false;
+ }
+
+ return true;
+ }),
+ );
+
+ return priceCents;
+ }, [pools, xvs]);
+
+ if (isFetching) {
+ return ;
+ }
+
+ const hasPositions = filteredPools.length > 0 || filteredVaults.length > 0;
+
+ if (!hasPositions) {
+ return ;
+ }
+
+ return (
+ <>
+
+
+ {filteredVaults.length > 0 && (
+
+ )}
+
+ {filteredPools.length > 0 && }
+
+ );
+};
+
+const Account: React.FC = () => {
+ const { accountAddress } = useAuth();
+ const { data: getPoolsData, isLoading: isGetPoolsLoading } = useGetPools({
+ accountAddress,
+ });
+
+ const { data: getVaultsData, isLoading: isGetVaultsLoading } = useGetVaults({
+ accountAddress,
+ });
+
+ const isFetching = isGetPoolsLoading || isGetVaultsLoading;
+
+ return (
+
+ );
+};
+
+export default Account;
diff --git a/src/pages/Account/index.tsx b/src/pages/Account/index.tsx
index 1f20cc2a15..7c16f93a03 100644
--- a/src/pages/Account/index.tsx
+++ b/src/pages/Account/index.tsx
@@ -1,122 +1,22 @@
/** @jsxImportSource @emotion/react */
-import BigNumber from 'bignumber.js';
-import { Spinner } from 'components';
-import React, { useMemo } from 'react';
-import { Pool, Vault } from 'types';
-import { areTokensEqual } from 'utilities';
+import React from 'react';
+import { isFeatureEnabled } from 'utilities';
-import { useGetPools, useGetVaults } from 'clients/api';
-import { useAuth } from 'context/AuthContext';
-import useGetToken from 'hooks/useGetToken';
+import PrimeStatusBanner from 'containers/PrimeStatusBanner';
-import AccountPlaceholder from './AccountPlaceholder';
-import PoolsBreakdown from './PoolsBreakdown';
-import Summary from './Summary';
-import VaultsBreakdown from './VaultsBreakdown';
+import AccountBreakdown from './AccountBreakdown';
import { useStyles } from './styles';
-export interface AccountUiProps {
- pools: Pool[];
- vaults: Vault[];
- isFetching?: boolean;
-}
-
-// We assume 1 VAI = 1 dollar
-const VAI_PRICE_CENTS = new BigNumber(100);
-
-export const AccountUi: React.FC = ({ isFetching, vaults, pools }) => {
+const Account: React.FC = () => {
const styles = useStyles();
- const xvs = useGetToken({
- symbol: 'XVS',
- });
-
- // Filter out vaults user has not staked in
- const filteredVaults = useMemo(
- () => vaults.filter(vault => vault.userStakedWei?.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],
- );
-
- const xvsPriceCents = useMemo(() => {
- let priceCents = new BigNumber(0);
-
- pools.forEach(pool =>
- pool.assets.every(asset => {
- if (xvs && areTokensEqual(asset.vToken.underlyingToken, xvs)) {
- priceCents = asset.tokenPriceCents;
- return false;
- }
-
- return true;
- }),
- );
-
- return priceCents;
- }, [pools, xvs]);
-
- if (isFetching) {
- return ;
- }
-
- const hasPositions = filteredPools.length > 0 || filteredVaults.length > 0;
-
- if (!hasPositions) {
- return ;
- }
return (
<>
-
-
- {filteredVaults.length > 0 && (
-
- )}
+ {isFeatureEnabled('prime') && }
- {filteredPools.length > 0 && }
+
);
};
-const Account: React.FC = () => {
- const { accountAddress } = useAuth();
- const { data: getPoolsData, isLoading: isGetPoolsLoading } = useGetPools({
- accountAddress,
- });
-
- const { data: getVaultsData, isLoading: isGetVaultsLoading } = useGetVaults({
- accountAddress,
- });
-
- const isFetching = isGetPoolsLoading || isGetVaultsLoading;
-
- return (
-
- );
-};
-
export default Account;
diff --git a/src/pages/Account/styles.ts b/src/pages/Account/styles.ts
index 533b087437..841fbba29b 100644
--- a/src/pages/Account/styles.ts
+++ b/src/pages/Account/styles.ts
@@ -16,33 +16,6 @@ export const useStyles = () => {
}
}
`,
- sectionTitle: css`
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: ${theme.spacing(6)};
-
- ${theme.breakpoints.down('lg')} {
- margin-bottom: ${theme.spacing(4)};
- }
-
- ${theme.breakpoints.down('md')} {
- flex-direction: column-reverse;
- align-items: flex-start;
- margin-bottom: ${theme.spacing(4)};
- }
- `,
- sectionTitleText: css`
- ${theme.breakpoints.down('md')} {
- font-size: ${theme.typography.h4.fontSize};
- font-weight: ${theme.typography.h4.fontWeight};
- }
- `,
- sectionTitleToggle: css`
- ${theme.breakpoints.down('md')} {
- margin-bottom: ${theme.spacing(6)};
- }
- `,
getNetApyColor: ({ netApyPercentage }: { netApyPercentage: number }) =>
netApyPercentage >= 0 ? theme.palette.interactive.success : theme.palette.interactive.error,
};
diff --git a/src/pages/Governance/ProposalList/CreateProposalModal/UploadOrManualProposal/index.tsx b/src/pages/Governance/ProposalList/CreateProposalModal/UploadOrManualProposal/index.tsx
index 50f063b036..dfc19bbcb8 100644
--- a/src/pages/Governance/ProposalList/CreateProposalModal/UploadOrManualProposal/index.tsx
+++ b/src/pages/Governance/ProposalList/CreateProposalModal/UploadOrManualProposal/index.tsx
@@ -60,6 +60,7 @@ const UploadOrManualProposal: React.FC = ({
),
}}
diff --git a/src/translation/translations/en.json b/src/translation/translations/en.json
index 3241985958..4eac52811a 100644
--- a/src/translation/translations/en.json
+++ b/src/translation/translations/en.json
@@ -1,15 +1,6 @@
{
"account": {
"marketBreakdown": {
- "cellGroup": {
- "dailyEarnings": "Daily Earnings",
- "netApy": "Net APY",
- "netApyTooltip": "Percentage of your total supply balance received as yearly interests",
- "netApyWithVaultStakeTooltip": "Percentage of your total supply and vault stake received as yearly interests",
- "totalBorrow": "Total Borrow",
- "totalSupply": "Total Supply",
- "totalVaultStake": "Total Vault Stake"
- },
"tables": {
"borrowTableTitle": "Borrowed assets",
"supplyTableTitle": "Supplied assets",
@@ -22,6 +13,18 @@
"poolTagTooltip": "Borrow limit used: {{borrowLimitUsedPercentage}}",
"title": "Pools"
},
+ "summary": {
+ "cellGroup": {
+ "dailyEarnings": "Daily Earnings",
+ "netApy": "Net APY",
+ "netApyTooltip": "Percentage of your total supply balance received as yearly interests",
+ "netApyWithVaultStakeTooltip": "Percentage of your total supply and vault stake received as yearly interests",
+ "totalBorrow": "Total Borrow",
+ "totalSupply": "Total Supply",
+ "totalVaultStake": "Total Vault Stake"
+ },
+ "title": "Summary"
+ },
"vaultsBreakdown": {
"table": {
"column": {
@@ -546,6 +549,26 @@
}
}
},
+ "primeStatusBanner": {
+ "becomePrimeTitle": "You can now become a Primer user",
+ "claimButtonLabel": "Claim Prime token",
+ "description": "Stake {{stakeDelta}} more then wait {{claimWaitingPeriod}} to claim your Prime token and boost your earnings. Learn more",
+ "noPrimeTokenWarning": {
+ "text": "All Prime tokens have been claimed",
+ "tooltip": "All {{primeTokenLimit}} Prime tokens are currently claimed. Some may become available if owners no longer meet the eligibility criteria or if we add more."
+ },
+ "progressBar": {
+ "ariaLabel": "Your current Prime progression",
+ "label": "Staked: {{userStakedXvsTokens}} / {{minXvsToStakeForPrimeTokens}}"
+ },
+ "promotionalTitle": "Boost your earnings by up to {{percentage}}",
+ "stakeButtonLabel": "Stake XVS",
+ "successfulTransactionModal": {
+ "message": "You are now a Prime user. Visit the dashboard or the account page to see your earning boosts.",
+ "title": "Prime token claimed"
+ },
+ "waitForPrimeTitle": "{{claimWaitingPeriod}} until you can become a Prime user"
+ },
"select": {
"defaultLabel": "Select"
},
diff --git a/src/utilities/isFeatureEnabled.ts b/src/utilities/isFeatureEnabled.ts
index 34fa6fc4d6..fe6599562b 100644
--- a/src/utilities/isFeatureEnabled.ts
+++ b/src/utilities/isFeatureEnabled.ts
@@ -1,6 +1,6 @@
import { ENV_VARIABLES } from 'config';
-export type FeatureFlag = 'isolatedPools' | 'integratedSwap';
+export type FeatureFlag = keyof typeof featureFlags;
const featureFlags = {
isolatedPools: ENV_VARIABLES.VITE_FF_ISOLATED_POOLS === 'true',