✨ Refactor and Improve all incentives

package.json

@@ -151,5 +151,6 @@
     "budget": null,
     "budgetPercentIncreaseRed": 20,
     "showDetails": true
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/incentives/GhoIncentivesCard.tsx

@@ -1,15 +1,17 @@
+import { ProtocolAction } from '@aave/contract-helpers';
 import { AaveV3Ethereum } from '@bgd-labs/aave-address-book';
 import { Trans } from '@lingui/macro';
 import { Box, Tooltip, Typography, TypographyProps } from '@mui/material';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
+import { CustomMarket } from 'src/ui-config/marketsConfig';
 
 import { PopperComponent } from '../ContentWithTooltip';
 import GhoBorrowApyRange from '../GhoBorrowApyRange';
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { Link } from '../primitives/Link';
 import { NoData } from '../primitives/NoData';
 import { TokenIcon } from '../primitives/TokenIcon';
-import { EthenaIncentivesButton } from './IncentivesButton';
+import { IncentivesCard } from './RateAndIncentivesBox';
 
 export interface GhoIncentivesCardProps {
   value: string | number;
@@ -107,6 +109,7 @@ export const GhoIncentivesCard = ({
           <Box
             sx={() => ({
               display: 'flex',
+              flexDirection: 'column',
               alignItems: 'center',
             })}
           >
@@ -128,12 +131,19 @@ export const GhoIncentivesCard = ({
                 data-cy={'apy'}
               />
             )}
+            <IncentivesCard
+              symbol={'GHO'}
+              incentives={[]}
+              address={AaveV3Ethereum.ASSETS.GHO.V_TOKEN}
+              market={CustomMarket.proto_mainnet_v3}
+              protocolAction={ProtocolAction.borrow}
+              displayBlank={false}
+            />
           </Box>
         </Tooltip>
       ) : (
         <NoData variant="secondary14" color="text.secondary" />
       )}
-      <EthenaIncentivesButton rewardedAsset={AaveV3Ethereum.ASSETS.GHO.V_TOKEN} />
     </Box>
   );
 };

src/components/incentives/IncentivesButton.tsx

@@ -4,22 +4,28 @@ 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 { useEtherfiIncentives } from 'src/hooks/useEtherfiIncentives';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
-import { useSonicIncentives } from 'src/hooks/useSonicIncentives';
+import { usePointsIncentives } from 'src/hooks/usePointsIncentives';
+import { useSimpleExternalIncentives } from 'src/hooks/useSimpleExternalIncentives';
 import { useZkSyncIgniteIncentives } from 'src/hooks/useZkSyncIgniteIncentives';
 import { useRootStore } from 'src/store/root';
 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 { EtherFiAirdropTooltipContent } from './EtherfiIncentivesTooltipContent';
 import { getSymbolMap, IncentivesTooltipContent } from './IncentivesTooltipContent';
 import { MeritIncentivesTooltipContent } from './MeritIncentivesTooltipContent';
-import { SonicAirdropTooltipContent } from './SonicIncentivesTooltipContent';
+import {
+  EthenaAirdropTooltipContent,
+  EtherFiAirdropTooltipContent,
+  SonicAirdropTooltipContent,
+} from './PointsIncentivesTooltipContent';
+import {
+  KernelAirdropTooltip,
+  SpkAirdropTooltip,
+  SuperFestTooltip,
+} from './SimpleExternalIncentivesTooltip';
 import { ZkSyncIgniteIncentivesTooltipContent } from './ZkSyncIgniteIncentivesTooltipContent';
 
 interface IncentivesButtonProps {
@@ -28,7 +34,7 @@ interface IncentivesButtonProps {
   displayBlank?: boolean;
 }
 
-const BlankIncentives = () => {
+export const BlankIncentives = () => {
   return (
     <Box
       sx={{
@@ -98,75 +104,80 @@ 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 EtherfiIncentivesButton = (params: {
-  symbol: string;
+export const SimpleExternalIncentiveTooltip = (params: {
   market: string;
-  protocolAction?: ProtocolAction;
+  rewardedAsset?: string;
 }) => {
-  const [open, setOpen] = useState(false);
-  const { market, protocolAction, symbol } = params;
-  const multiplier = useEtherfiIncentives(market, symbol, protocolAction);
-
-  if (!multiplier) {
-    return null;
-  }
+  const simpleExternalIncentivesTooltips = useSimpleExternalIncentives(params);
 
   return (
-    <ContentWithTooltip
-      tooltipContent={<EtherFiAirdropTooltipContent multiplier={multiplier} />}
-      withoutHover
-      setOpen={setOpen}
-      open={open}
-    >
-      <ContentEtherfiButton multiplier={multiplier} />
-    </ContentWithTooltip>
+    <>
+      {simpleExternalIncentivesTooltips.superFestRewards && <SuperFestTooltip />}
+      {simpleExternalIncentivesTooltips.spkAirdrop && <SpkAirdropTooltip />}
+      {simpleExternalIncentivesTooltips.kernelPoints && <KernelAirdropTooltip />}
+    </>
   );
 };
 
-export const SonicIncentivesButton = ({ rewardedAsset }: { rewardedAsset?: string }) => {
+export const PointsIncentiveButton = (params: { market: string; rewardedAsset?: string }) => {
   const [open, setOpen] = useState(false);
-  const points = useSonicIncentives(rewardedAsset);
-
-  if (!points) {
-    return null;
-  }
+  const pointsIncentivesTooltips = usePointsIncentives(params);
 
   return (
-    <ContentWithTooltip
-      tooltipContent={<SonicAirdropTooltipContent points={points} />}
-      withoutHover
-      setOpen={setOpen}
-      open={open}
-    >
-      <ContentSonicButton points={points} />
-    </ContentWithTooltip>
+    <>
+      {pointsIncentivesTooltips.ethenaPoints && (
+        <ContentWithTooltip
+          tooltipContent={
+            <EthenaAirdropTooltipContent points={pointsIncentivesTooltips.ethenaPoints} />
+          }
+          withoutHover
+          setOpen={setOpen}
+          open={open}
+        >
+          <ContentPoints
+            value={pointsIncentivesTooltips.ethenaPoints}
+            iconSrc={'/icons/other/ethena.svg'}
+          />
+        </ContentWithTooltip>
+      )}
+      {pointsIncentivesTooltips.sonicPoints && (
+        <ContentWithTooltip
+          tooltipContent={
+            <SonicAirdropTooltipContent points={pointsIncentivesTooltips.sonicPoints} />
+          }
+          withoutHover
+          setOpen={setOpen}
+          open={open}
+        >
+          <ContentPoints
+            value={pointsIncentivesTooltips.sonicPoints}
+            iconSrc={'/icons/networks/sonic.svg'}
+          />
+        </ContentWithTooltip>
+      )}
+      {pointsIncentivesTooltips.etherfiPoints && (
+        <ContentWithTooltip
+          tooltipContent={
+            <EtherFiAirdropTooltipContent multiplier={pointsIncentivesTooltips.etherfiPoints} />
+          }
+          withoutHover
+          setOpen={setOpen}
+          open={open}
+        >
+          <ContentPoints
+            value={pointsIncentivesTooltips.etherfiPoints}
+            iconSrc={'/icons/other/etherfi.svg'}
+          />
+        </ContentWithTooltip>
+      )}
+    </>
   );
 };
 
-export const IncentivesButton = ({ incentives, symbol, displayBlank }: IncentivesButtonProps) => {
+export const LmIncentivesButton = ({ incentives, symbol, displayBlank }: IncentivesButtonProps) => {
   const [open, setOpen] = useState(false);
 
-  if (!(incentives && incentives.length > 0)) {
+  if (!(incentives && incentives.filter((i) => i.incentiveAPR !== '0').length > 0)) {
     if (displayBlank) {
       return <BlankIncentives />;
     } else {
@@ -209,7 +220,7 @@ export const IncentivesButton = ({ incentives, symbol, displayBlank }: Incentive
   );
 };
 
-const Content = ({
+export const Content = ({
   incentives,
   incentivesNetAPR,
   displayBlank,
@@ -343,7 +354,7 @@ const Content = ({
   );
 };
 
-const ContentButton = ({ value, iconSrc }: { value: number; iconSrc: string }) => {
+const ContentPoints = ({ value, iconSrc }: { value: number; iconSrc: string }) => {
   const [open, setOpen] = useState(false);
   const trackEvent = useRootStore((store) => store.trackEvent);
 
@@ -380,15 +391,3 @@ const ContentButton = ({ value, iconSrc }: { value: number; iconSrc: string }) =
     </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" />
-);