Merge develop to main

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

consts/matomo/matomo-wallets-events.ts

@@ -20,27 +20,19 @@ type EventsData = Partial<Record<WalletIdsEthereum, [string, string]>>;
 
 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 = {

features/earn/shared/drawer-right/drawer-right.tsx

@@ -31,17 +31,19 @@ export const DrawerRight: FC<DrawerRightProps> = ({ onClose, isOpen }) => {
   return (
     <DrawerRightStyled onKeyDown={handleKeyDown} tabIndex={-1} isOpen={isOpen}>
       <DrawerRightWrapper>
-        <DrawerRightContent>
+        <DrawerRightContent data-testid={'earn-side-panel'}>
           <DrawerRightHeader>
-            <div>What is EarnETH Vault and how it works</div>
+            <div data-testid={'title'}>
+              What is EarnETH Vault and how it works
+            </div>
             <DrawerRightClose
               icon={<Close />}
               size="xxs"
               variant="ghost"
               onClick={onClose}
             />
           </DrawerRightHeader>
-          <DrawerDescription>
+          <DrawerDescription data-testid={'description'}>
             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,15 +53,15 @@ export const DrawerRight: FC<DrawerRightProps> = ({ onClose, isOpen }) => {
             ETH-denominated assets.
           </DrawerDescription>
           <DrawerTable />
-          <DrawerRightText>
+          <DrawerRightText data-testid={'table-description'}>
             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
             purposes only and does not constitute a recommendation. Outcomes and
             rewards may vary based on strategy composition, market conditions,
             and protocol parameters.
           </DrawerRightText>
-          <DrawerRightText>
+          <DrawerRightText data-testid={'mellow-points-text'}>
             All Mellow points you accumulate remain yours, with your balance
             visible on the{' '}
             <Link

features/earn/shared/drawer-right/drawer-table/drawer-table.tsx

@@ -92,7 +92,7 @@ const renderCell = (cell: ReactNode | string[]): ReactNode => {
 export const DrawerTable = () => {
   return (
     <div>
-      <TableHeader>
+      <TableHeader data-testid={'table-title'}>
         Comparison between GGV/stRATEGY and the EarnETH Vault
       </TableHeader>
       {DATA.map((item) => (

features/earn/shared/v2/vault-card/index.ts

@@ -1 +1,2 @@
 export * from './vault-card';
+export * from './legacy-vault-card';

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<LegacyVaultCardProps> = ({
+  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 (
+    <CardWrapper $variant={variant} data-testid={`${urlSlug}-vault-card`}>
+      <CardOverlayLink
+        as={LocalLink}
+        href={depositHref}
+        onClick={depositLinkCallback}
+        data-testid={'open-vault-btn'}
+        aria-label={title}
+      />
+      <CardHeader>
+        <CardHeaderContent>
+          <CardTitle>
+            <TitleTextStyled>{title}</TitleTextStyled>
+            {protectedBadgeTooltipText && (
+              <BadgeStyled>
+                <Badge
+                  text="PROTECTED"
+                  tooltipText={protectedBadgeTooltipText}
+                />
+              </BadgeStyled>
+            )}
+            {isDeprecated && (
+              <StyledTooltip
+                title="Vault users can upgrade their tokens to the new unified EarnETH vault without withdrawal or downtime in rewards."
+                placement="bottom"
+              >
+                <CardTitleBadge variant="gradient" icon={<ChevronsUpIcon />}>
+                  {' '}
+                  Upgrading
+                </CardTitleBadge>
+              </StyledTooltip>
+            )}
+          </CardTitle>
+          <CardDescription>{description}</CardDescription>
+        </CardHeaderContent>
+        <VaultIconWrapper>{illustration}</VaultIconWrapper>
+      </CardHeader>
+      <CardDivider />
+      <CardStats>
+        <StatItem data-testid="apx-value">
+          <StatLabel>
+            {stats.apxLabel}
+            <VaultTip
+              placement="bottomLeft"
+              style={{ position: 'relative', zIndex: 20 }}
+            >
+              {stats.apxHint}
+            </VaultTip>
+          </StatLabel>
+          <StatValue $accent>
+            <InlineLoader isLoading={stats.isLoading} width={70}>
+              <FormatPercent value={stats.apx} decimals="percent" />
+            </InlineLoader>
+          </StatValue>
+        </StatItem>
+        <StatItem data-testid="tvl-value">
+          <StatLabel>TVL</StatLabel>
+          <StatValue>
+            <InlineLoader isLoading={stats.isLoading} width={70}>
+              <FormatLargeAmount amount={stats.tvl} />
+            </InlineLoader>
+          </StatValue>
+        </StatItem>
+        {!!position?.sharesBalance && (
+          <StatItem>
+            <StatLabel>My position</StatLabel>
+            <StatValue>
+              <InlineLoader width={32} isLoading={position.isLoading}>
+                <FormatToken
+                  trimEllipsis
+                  symbol={position.sharesSymbol}
+                  decimals={getTokenDecimals(position.sharesSymbol)}
+                  amount={position.sharesBalance}
+                  fallback="—"
+                />
+              </InlineLoader>
+            </StatValue>
+          </StatItem>
+        )}
+      </CardStats>
+      <CardCta>
+        <LocalLink href={depositHref} onClick={depositLinkCallback}>
+          <Button fullwidth variant="translucent">
+            {ctaLabel}
+          </Button>
+        </LocalLink>
+      </CardCta>
+    </CardWrapper>
+  );
+};

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;
 `;