diff --git a/consts/api.ts b/consts/api.ts index f840ceecc..296e320db 100644 --- a/consts/api.ts +++ b/consts/api.ts @@ -17,6 +17,7 @@ export const enum ETH_API_ROUTES { ETH_PRICE = '/v1/protocol/eth/price', STETH_STATS = '/v1/protocol/steth/stats', STETH_SMA_APR = '/v1/protocol/steth/apr/sma', + STETH_APR = '/v1/protocol/steth/apr', SWAP_ONE_INCH = '/v1/swap/one-inch', SWAP_JUMPER = '/v1/swap/jumper', CURVE_APR = '/v1/pool/curve/steth-eth/apr/last', diff --git a/consts/matomo/matomo-wallets-events.ts b/consts/matomo/matomo-wallets-events.ts index c974c6a3b..d05cb1799 100644 --- a/consts/matomo/matomo-wallets-events.ts +++ b/consts/matomo/matomo-wallets-events.ts @@ -20,27 +20,19 @@ type EventsData = Partial>; const EVENTS_DATA_CONNECT_START: EventsData = { ambire: ['on Ambire', 'ambire'], - binanceWallet: ['Binance Web3', 'binance_web3'], bitget: ['BitGet', 'bitget'], - brave: ['Brave', 'brave'], browserExtension: ['Browser', 'browser'], - coin98: ['Coin98', 'coin98'], - coinbase: ['Coinbase Wallet', 'coinbase_wallet'], coinbaseSmartWallet: ['Coinbase Smart Wallet', 'coinbase_smart_wallet'], - exodus: ['Exodus', 'exodus'], imToken: ['imToken', 'imtoken'], ledgerHID: ['Ledger', 'ledger'], metaMask: ['Metamask', 'metamask'], okx: ['OKX', 'okx'], - trust: ['Trust', 'trust'], walletConnect: ['WalletConnect', 'walletconnect'], - ctrl: ['Ctrl', 'ctrl'], } as const; const EVENTS_DATA_CONNECT_SUCCESS: EventsData = { ...EVENTS_DATA_CONNECT_START, ambire: ['Ambire', 'ambire'], - binanceWallet: ['Binance Web3', 'binance_web3_wallet'], }; export const walletMetricProps: MetricProps = { diff --git a/features/earn/shared/drawer-right/drawer-right.tsx b/features/earn/shared/drawer-right/drawer-right.tsx index 46f6baa02..b04627e89 100644 --- a/features/earn/shared/drawer-right/drawer-right.tsx +++ b/features/earn/shared/drawer-right/drawer-right.tsx @@ -31,9 +31,11 @@ export const DrawerRight: FC = ({ onClose, isOpen }) => { return ( - + -
What is EarnETH Vault and how it works
+
+ What is EarnETH Vault and how it works +
} size="xxs" @@ -41,7 +43,7 @@ export const DrawerRight: FC = ({ onClose, isOpen }) => { onClick={onClose} />
- + EarnETH Vault is a meta-vault designed to optimize returns on deployed assets across Lido Earn strategies. Today, it allocates assets across GGV and stRATEGY, with the ability to dynamically @@ -51,7 +53,7 @@ export const DrawerRight: FC = ({ onClose, isOpen }) => { ETH-denominated assets. - + The table above describes structural differences between accessing a single vault strategy and accessing a meta-vault that allocates across multiple strategies. It is provided for informational @@ -59,7 +61,7 @@ export const DrawerRight: FC = ({ onClose, isOpen }) => { rewards may vary based on strategy composition, market conditions, and protocol parameters. - + All Mellow points you accumulate remain yours, with your balance visible on the{' '} { export const DrawerTable = () => { return (
- + Comparison between GGV/stRATEGY and the EarnETH Vault {DATA.map((item) => ( diff --git a/features/earn/shared/v2/vault-card/index.ts b/features/earn/shared/v2/vault-card/index.ts index d221a6a1e..d13328412 100644 --- a/features/earn/shared/v2/vault-card/index.ts +++ b/features/earn/shared/v2/vault-card/index.ts @@ -1 +1,2 @@ export * from './vault-card'; +export * from './legacy-vault-card'; diff --git a/features/earn/shared/v2/vault-card/legacy-vault-card.tsx b/features/earn/shared/v2/vault-card/legacy-vault-card.tsx new file mode 100644 index 000000000..81aa198a6 --- /dev/null +++ b/features/earn/shared/v2/vault-card/legacy-vault-card.tsx @@ -0,0 +1,170 @@ +import React from 'react'; +import { Button } from '@lidofinance/lido-ui'; + +import { + CardWrapper, + CardOverlayLink, + CardHeader, + CardHeaderContent, + CardTitle, + CardDescription, + CardStats, + StatItem, + StatLabel, + StatValue, + CardDivider, + CardCta, + VaultIconWrapper, + CardTitleBadge, + ChevronsUpIcon, + StyledTooltip, + BadgeStyled, + TitleTextStyled, +} from './styles'; +import { LocalLink } from 'shared/components/local-link'; +import { EARN_PATH } from 'consts/urls'; +import { EARN_VAULT_DEPOSIT_SLUG } from 'features/earn/consts'; +import { FormatPercent } from 'shared/formatters/format-percent'; +import { FormatLargeAmount } from 'shared/formatters/format-large-amount'; +import { FormatToken } from 'shared/formatters/format-token'; +import { Badge } from 'features/earn/shared/badge'; +import { getTokenDecimals } from 'utils/token-decimals'; +import { useConfig } from 'config/use-config'; +import { InlineLoader } from '../../inline-loader'; +import { VaultTip } from '../../vault-tip'; + +type VaultStats = { + tvl?: number | null; + apx?: number | null; + apxLabel: string; + isLoading?: boolean; + apxHint?: React.ReactNode; +}; + +type LegacyVaultPosition = { + sharesBalance?: bigint; + sharesSymbol: string; + isLoading?: boolean; +}; + +type LegacyVaultCardProps = { + title: string; + description?: string; + urlSlug: string; + stats: VaultStats; + ctaLabel: string; + position?: LegacyVaultPosition; + variant?: 'eth' | 'usd' | 'default'; + illustration?: React.ReactNode; + depositLinkCallback?: () => void; + protectedBadgeTooltipText?: React.ReactNode; +}; + +export const LegacyVaultCard: React.FC = ({ + title, + description, + urlSlug, + stats, + position, + ctaLabel, + variant = 'default', + illustration, + depositLinkCallback, + protectedBadgeTooltipText, +}) => { + const isDeprecated = useConfig().externalConfig.earnVaults.find( + (vault) => vault.name === urlSlug, + )?.deprecated; + + const depositHref = `${EARN_PATH}/${urlSlug}/${EARN_VAULT_DEPOSIT_SLUG}`; + + return ( + + + + + + {title} + {protectedBadgeTooltipText && ( + + + + )} + {isDeprecated && ( + + }> + {' '} + Upgrading + + + )} + + {description} + + {illustration} + + + + + + {stats.apxLabel} + + {stats.apxHint} + + + + + + + + + + TVL + + + + + + + {!!position?.sharesBalance && ( + + My position + + + + + + + )} + + + + + + + + ); +}; diff --git a/features/earn/shared/v2/vault-card/styles.tsx b/features/earn/shared/v2/vault-card/styles.tsx index 77e49904d..ee984b05c 100644 --- a/features/earn/shared/v2/vault-card/styles.tsx +++ b/features/earn/shared/v2/vault-card/styles.tsx @@ -223,6 +223,17 @@ export const StatValueIcon = styled.span` height: 24px; `; +export const StatSubValue = styled.span` + color: var(--lido-color-textSecondary); + font-size: ${({ theme }) => theme.fontSizesMap.xs}px; + font-weight: 400; + line-height: 24px; + + ${({ theme }) => theme.mediaQueries.md} { + display: none; + } +`; + export const CardCta = styled.div` margin-top: 32px; `; diff --git a/features/earn/shared/v2/vault-card/vault-card.tsx b/features/earn/shared/v2/vault-card/vault-card.tsx index f70018d84..85db15584 100644 --- a/features/earn/shared/v2/vault-card/vault-card.tsx +++ b/features/earn/shared/v2/vault-card/vault-card.tsx @@ -17,7 +17,6 @@ import { VaultIconWrapper, CardTitleBadge, ChevronsUpIcon, - StatValueIcon, StyledTooltip, BadgeStyled, TitleTextStyled, @@ -45,12 +44,11 @@ type VaultStats = { }; type VaultPosition = { - balance?: bigint; - claimable?: bigint; - pending?: Array<{ tokenSymbol: string; amount: bigint }>; + sharesBalance?: bigint; + sharesSymbol: string; + baseAmount?: bigint; + baseSymbol: string; isLoading?: boolean; - symbol: string; - icon?: React.ReactNode; }; type VaultCardProps = { @@ -98,9 +96,11 @@ export const VaultCard: React.FC = ({ - {title} + + {title} + {protectedBadgeTooltipText && ( - + = ({ title="Vault users can upgrade their tokens to the new unified EarnETH vault without withdrawal or downtime in rewards." placement="bottom" > - }> + } + data-testid={'upgradingBadge'} + > {' '} Upgrading )} - {description} + + {description} + {illustration} @@ -129,7 +135,7 @@ export const VaultCard: React.FC = ({ {stats.apxLabel} {stats.apxHint} @@ -149,29 +155,41 @@ export const VaultCard: React.FC = ({ - {!!position?.balance && ( + {!!position?.sharesBalance && ( - My position + + My deposit + + You hold{' '} + + . Shown in {position.baseSymbol} at current conversion rates. + + - {position.icon && ( - {position.icon} - )} )} {warning && {warning}} - +