✨Add new Ethena Rewards tooltip [skip cypress] (#2365)

Author: MartinGbz

public/icons/other/ethena.svg

@@ -0,0 +1,29 @@
+import { Trans } from '@lingui/macro';
+import { Box } from '@mui/material';
+
+import { Link } from '../primitives/Link';
+
+export const EthenaAirdropTooltipContent = ({ points }: { points: number }) => {
+  return (
+    <Box>
+      <Trans>{`This asset is eligible for ${(<b>{points}x</b>)} Ethena Rewards.\n`}</Trans>
+      <br />
+      <Trans>{'Learn more about Ethena Rewards program'}</Trans>{' '}
+      <Link
+        href="https://app.ethena.fi/join"
+        sx={{ textDecoration: 'underline' }}
+        variant="caption"
+        color="text.secondary"
+      >
+        {'here'}
+      </Link>
+      {'.'}
+      <br />
+      <br />
+      <Trans>
+        {`Aave Labs does not
+          guarantee the program and accepts no liability.\n`}
+      </Trans>
+    </Box>
+  );
+};

src/components/incentives/EthenaIncentivesTooltipContent.tsx

@@ -4,6 +4,7 @@ import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/i
 import { DotsHorizontalIcon } from '@heroicons/react/solid';
 import { Box, SvgIcon, Typography } from '@mui/material';
 import { useState } from 'react';
+import { useEthenaIncentives } from 'src/hooks/useEthenaIncentives';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
 import { useZkSyncIgniteIncentives } from 'src/hooks/useZkSyncIgniteIncentives';
 import { useRootStore } from 'src/store/root';
@@ -12,6 +13,7 @@ import { DASHBOARD } from 'src/utils/mixPanelEvents';
 import { ContentWithTooltip } from '../ContentWithTooltip';
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { TokenIcon } from '../primitives/TokenIcon';
+import { EthenaAirdropTooltipContent } from './EthenaIncentivesTooltipContent';
 import { getSymbolMap, IncentivesTooltipContent } from './IncentivesTooltipContent';
 import { MeritIncentivesTooltipContent } from './MeritIncentivesTooltipContent';
 import { ZkSyncIgniteIncentivesTooltipContent } from './ZkSyncIgniteIncentivesTooltipContent';
@@ -92,6 +94,26 @@ export const ZkIgniteIncentivesButton = (params: {
   );
 };
 
+export const EthenaIncentivesButton = ({ rewardedAsset }: { rewardedAsset?: string }) => {
+  const [open, setOpen] = useState(false);
+  const points = useEthenaIncentives(rewardedAsset);
+
+  if (!points) {
+    return null;
+  }
+
+  return (
+    <ContentWithTooltip
+      tooltipContent={<EthenaAirdropTooltipContent points={points} />}
+      withoutHover
+      setOpen={setOpen}
+      open={open}
+    >
+      <ContentEthenaButton points={points} />
+    </ContentWithTooltip>
+  );
+};
+
 export const IncentivesButton = ({ incentives, symbol, displayBlank }: IncentivesButtonProps) => {
   const [open, setOpen] = useState(false);
 
@@ -271,3 +293,41 @@ const Content = ({
     </Box>
   );
 };
+
+const ContentEthenaButton = ({ points }: { points: number }) => {
+  const [open, setOpen] = useState(false);
+  const trackEvent = useRootStore((store) => store.trackEvent);
+
+  return (
+    <Box
+      sx={(theme) => ({
+        p: { xs: '0 4px', xsm: '2px 4px' },
+        border: `1px solid ${open ? theme.palette.action.disabled : theme.palette.divider}`,
+        borderRadius: '4px',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'opacity 0.2s ease',
+        bgcolor: open ? 'action.hover' : 'transparent',
+        '&:hover': {
+          bgcolor: 'action.hover',
+          borderColor: 'action.disabled',
+        },
+      })}
+      onClick={() => {
+        trackEvent(DASHBOARD.VIEW_LM_DETAILS_DASHBOARD, {});
+        setOpen(!open);
+      }}
+    >
+      <Box sx={{ mr: 2 }}>
+        <Typography component="span" variant="secondary12" color="text.secondary">
+          {`${points}x`}
+        </Typography>
+      </Box>
+      <Box sx={{ display: 'inline-flex' }}>
+        <img src={'/icons/other/ethena.svg'} width={12} height={12} alt="ethena-icon" />
+      </Box>
+    </Box>
+  );
+};

src/components/incentives/IncentivesButton.tsx

@@ -6,6 +6,7 @@ import { ReactNode } from 'react';
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { NoData } from '../primitives/NoData';
 import {
+  EthenaIncentivesButton,
   IncentivesButton,
   MeritIncentivesButton,
   ZkIgniteIncentivesButton,
@@ -85,6 +86,7 @@ export const IncentivesCard = ({
           rewardedAsset={address}
           protocolAction={protocolAction}
         />
+        <EthenaIncentivesButton rewardedAsset={address} />
       </Box>
     </Box>
   );

src/components/incentives/IncentivesCard.tsx

@@ -0,0 +1,18 @@
+import { AaveV3Ethereum, AaveV3EthereumLido } from '@bgd-labs/aave-address-book';
+
+const getEthenaData = (assetAddress: string): number | undefined =>
+  ETHENA_DATA_MAP.get(assetAddress);
+
+const ETHENA_DATA_MAP: Map<string, number> = new Map([
+  [AaveV3Ethereum.ASSETS.USDe.A_TOKEN, 25],
+  [AaveV3Ethereum.ASSETS.sUSDe.A_TOKEN, 5],
+  [AaveV3EthereumLido.ASSETS.sUSDe.A_TOKEN, 5],
+]);
+
+export const useEthenaIncentives = (rewardedAsset?: string) => {
+  if (!rewardedAsset) {
+    return undefined;
+  }
+
+  return getEthenaData(rewardedAsset);
+};

src/hooks/useEthenaIncentives.ts

@@ -21,6 +21,10 @@ msgstr "If you DO NOT unstake within {0} of unstake window, you will need to act
 msgid "Receive (est.)"
 msgstr "Receive (est.)"
 
+#: src/components/incentives/EthenaIncentivesTooltipContent.tsx
+msgid "Aave Labs does not guarantee the program and accepts no liability."
+msgstr "Aave Labs does not guarantee the program and accepts no liability."
+
 #: src/components/incentives/IncentivesTooltipContent.tsx
 msgid "Participating in this {symbol} reserve gives annualized rewards."
 msgstr "Participating in this {symbol} reserve gives annualized rewards."
@@ -124,6 +128,10 @@ msgstr "Collateral change"
 msgid "This is the total amount that you are able to supply to in this reserve. You are able to supply your wallet balance up until the supply cap is reached."
 msgstr "This is the total amount that you are able to supply to in this reserve. You are able to supply your wallet balance up until the supply cap is reached."
 
+#: src/components/incentives/EthenaIncentivesTooltipContent.tsx
+msgid "This asset is eligible for {0} Ethena Rewards."
+msgstr "This asset is eligible for {0} Ethena Rewards."
+
 #: src/modules/history/PriceUnavailable.tsx
 msgid "Price data is not currently available for this reserve on the protocol subgraph"
 msgstr "Price data is not currently available for this reserve on the protocol subgraph"
@@ -1167,6 +1175,10 @@ msgstr "Current LTV"
 msgid "Market"
 msgstr "Market"
 
+#: src/components/incentives/EthenaIncentivesTooltipContent.tsx
+msgid "Learn more about Ethena Rewards program"
+msgstr "Learn more about Ethena Rewards program"
+
 #: src/layouts/FeedbackDialog.tsx
 msgid "Send Feedback"
 msgstr "Send Feedback"