feat: add Ether.fi loyalty program (#2380)

Author: NandyBa

public/icons/networks/sonic.svg

@@ -0,0 +1,30 @@
+import { Trans } from '@lingui/macro';
+import { Box } from '@mui/material';
+
+import { Link } from '../primitives/Link';
+
+export const EtherFiAirdropTooltipContent = ({ multiplier }: { multiplier: number }) => {
+  return (
+    <Box>
+      <Trans>
+        {`This asset is eligible for the Ether.fi Loyalty program with a `}
+        <b>x{multiplier} multiplier</b>
+        {`.`}
+      </Trans>
+      <br />
+      <Trans>Learn more about the Ether.fi program</Trans>{' '}
+      <Link
+        href="https://etherfi.gitbook.io/etherfi/getting-started/loyalty-points"
+        sx={{ textDecoration: 'underline' }}
+        variant="caption"
+        color="text.secondary"
+      >
+        here
+      </Link>
+      .
+      <br />
+      <br />
+      <Trans>Aave Labs does not guarantee the program and accepts no liability.</Trans>
+    </Box>
+  );
+};

public/icons/other/ether.fi.svg

@@ -5,6 +5,7 @@ import { DotsHorizontalIcon } from '@heroicons/react/solid';
 import { Box, SvgIcon, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useEthenaIncentives } from 'src/hooks/useEthenaIncentives';
+import { useEtherfiIncentives } from 'src/hooks/useEtherfiIncentives';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
 import { useSonicIncentives } from 'src/hooks/useSonicIncentives';
 import { useZkSyncIgniteIncentives } from 'src/hooks/useZkSyncIgniteIncentives';
@@ -15,6 +16,7 @@ import { ContentWithTooltip } from '../ContentWithTooltip';
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { TokenIcon } from '../primitives/TokenIcon';
 import { EthenaAirdropTooltipContent } from './EthenaIncentivesTooltipContent';
+import { EtherFiAirdropTooltipContent } from './EtherfiIncentivesTooltipContent';
 import { getSymbolMap, IncentivesTooltipContent } from './IncentivesTooltipContent';
 import { MeritIncentivesTooltipContent } from './MeritIncentivesTooltipContent';
 import { SonicAirdropTooltipContent } from './SonicIncentivesTooltipContent';
@@ -111,7 +113,32 @@ export const EthenaIncentivesButton = ({ rewardedAsset }: { rewardedAsset?: stri
       setOpen={setOpen}
       open={open}
     >
-      <ContentPointsButton points={points} icon={'/icons/other/ethena.svg'} />
+      <ContentEthenaButton points={points} />
+    </ContentWithTooltip>
+  );
+};
+
+export const EtherfiIncentivesButton = (params: {
+  symbol: string;
+  market: string;
+  protocolAction?: ProtocolAction;
+}) => {
+  const [open, setOpen] = useState(false);
+  const { market, protocolAction, symbol } = params;
+  const multiplier = useEtherfiIncentives(market, symbol, protocolAction);
+
+  if (!multiplier) {
+    return null;
+  }
+
+  return (
+    <ContentWithTooltip
+      tooltipContent={<EtherFiAirdropTooltipContent multiplier={multiplier} />}
+      withoutHover
+      setOpen={setOpen}
+      open={open}
+    >
+      <ContentEtherfiButton multiplier={multiplier} />
     </ContentWithTooltip>
   );
 };
@@ -131,7 +158,7 @@ export const SonicIncentivesButton = ({ rewardedAsset }: { rewardedAsset?: strin
       setOpen={setOpen}
       open={open}
     >
-      <ContentPointsButton points={points} icon={'/icons/networks/sonic.svg'} />
+      <ContentSonicButton points={points} />
     </ContentWithTooltip>
   );
 };
@@ -316,7 +343,7 @@ const Content = ({
   );
 };
 
-const ContentPointsButton = ({ points, icon }: { points: number; icon: string }) => {
+const ContentButton = ({ value, iconSrc }: { value: number; iconSrc: string }) => {
   const [open, setOpen] = useState(false);
   const trackEvent = useRootStore((store) => store.trackEvent);
 
@@ -344,12 +371,24 @@ const ContentPointsButton = ({ points, icon }: { points: number; icon: string })
     >
       <Box sx={{ mr: 2 }}>
         <Typography component="span" variant="secondary12" color="text.secondary">
-          {`${points}x`}
+          {`${value}x`}
         </Typography>
       </Box>
       <Box sx={{ display: 'inline-flex' }}>
-        <img src={icon} width={12} height={12} alt="ethena-icon" />
+        <img src={iconSrc} width={12} height={12} alt="icon" />
       </Box>
     </Box>
   );
 };
+
+const ContentEthenaButton = ({ points }: { points: number }) => (
+  <ContentButton value={points} iconSrc="/icons/other/ethena.svg" />
+);
+
+const ContentEtherfiButton = ({ multiplier }: { multiplier: number }) => (
+  <ContentButton value={multiplier} iconSrc="/icons/other/ether.fi.svg" />
+);
+
+const ContentSonicButton = ({ points }: { points: number }) => (
+  <ContentButton value={points} iconSrc="/icons/networks/sonic.svg" />
+);

src/components/incentives/EtherfiIncentivesTooltipContent.tsx

@@ -7,6 +7,7 @@ import { FormattedNumber } from '../primitives/FormattedNumber';
 import { NoData } from '../primitives/NoData';
 import {
   EthenaIncentivesButton,
+  EtherfiIncentivesButton,
   IncentivesButton,
   MeritIncentivesButton,
   SonicIncentivesButton,
@@ -94,6 +95,7 @@ export const IncentivesCard = ({
           protocolAction={protocolAction}
         />
         <EthenaIncentivesButton rewardedAsset={address} />
+        <EtherfiIncentivesButton symbol={symbol} market={market} protocolAction={protocolAction} />
         <SonicIncentivesButton rewardedAsset={address} />
       </Box>
     </Box>

src/components/incentives/IncentivesButton.tsx

@@ -0,0 +1,32 @@
+import { ProtocolAction } from '@aave/contract-helpers';
+
+import { CustomMarket } from '../ui-config/marketsConfig';
+
+const getetherfiData = (
+  market: string,
+  protocolAction: ProtocolAction,
+  symbol: string
+): number | undefined => ETHERFI_DATA_MAP.get(`${market}-${protocolAction}-${symbol}`);
+
+const ETHERFI_DATA_MAP: Map<string, number> = new Map([
+  [`${CustomMarket.proto_mainnet_v3}-${ProtocolAction.supply}-weETH`, 3],
+  [`${CustomMarket.proto_etherfi_v3}-${ProtocolAction.supply}-weETH`, 3],
+  [`${CustomMarket.proto_lido_v3}-${ProtocolAction.supply}-weETH`, 3],
+  [`${CustomMarket.proto_arbitrum_v3}-${ProtocolAction.supply}-weETH`, 3],
+  [`${CustomMarket.proto_base_v3}-${ProtocolAction.supply}-weETH`, 3],
+  [`${CustomMarket.proto_scroll_v3}-${ProtocolAction.supply}-weETH`, 3],
+  [`${CustomMarket.proto_zksync_v3}-${ProtocolAction.supply}-weETH`, 3],
+  [`${CustomMarket.proto_linea_v3}-${ProtocolAction.supply}-weETH`, 3],
+]);
+
+export const useEtherfiIncentives = (
+  market: string,
+  symbol: string,
+  protocolAction?: ProtocolAction
+) => {
+  if (!market || !protocolAction || !symbol) {
+    return undefined;
+  }
+
+  return getetherfiData(market, protocolAction, symbol);
+};

src/components/incentives/IncentivesCard.tsx

@@ -22,6 +22,7 @@ msgid "Receive (est.)"
 msgstr "Receive (est.)"
 
 #: src/components/incentives/EthenaIncentivesTooltipContent.tsx
+#: src/components/incentives/EtherfiIncentivesTooltipContent.tsx
 #: src/components/incentives/SonicIncentivesTooltipContent.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."
@@ -196,6 +197,10 @@ msgstr "Asset cannot be migrated due to supply cap restriction in {marketName} v
 msgid "Blocked Address"
 msgstr "Blocked Address"
 
+#: src/components/incentives/EtherfiIncentivesTooltipContent.tsx
+msgid "This asset is eligible for the Ether.fi Loyalty program with a <0>x{multiplier} multiplier</0>."
+msgstr "This asset is eligible for the Ether.fi Loyalty program with a <0>x{multiplier} multiplier</0>."
+
 #: src/modules/governance/GovernanceTopPanel.tsx
 msgid "Aave is a fully decentralized, community governed protocol by the AAVE token-holders. AAVE token-holders collectively discuss, propose, and vote on upgrades to the protocol. AAVE token-holders (Ethereum network only) can either vote themselves on new proposals or delagate to an address of choice. To learn more check out the Governance"
 msgstr "Aave is a fully decentralized, community governed protocol by the AAVE token-holders. AAVE token-holders collectively discuss, propose, and vote on upgrades to the protocol. AAVE token-holders (Ethereum network only) can either vote themselves on new proposals or delagate to an address of choice. To learn more check out the Governance"
@@ -2738,6 +2743,10 @@ msgstr "Debt"
 msgid "Filter"
 msgstr "Filter"
 
+#: src/components/incentives/EtherfiIncentivesTooltipContent.tsx
+msgid "Learn more about the Ether.fi program"
+msgstr "Learn more about the Ether.fi program"
+
 #: src/modules/staking/StakingPanel.tsx
 msgid "Cooldown to unstake"
 msgstr "Cooldown to unstake"