feat: implement SPK rewards tooltip (#2202)

Co-authored-by: Mark Hinschberger <[email protected]>

src/components/infoTooltips/SpkAirdropTooltip.tsx

@@ -0,0 +1,43 @@
+import { Trans } from '@lingui/macro';
+
+import { Link } from '../primitives/Link';
+import { TextWithTooltip } from '../TextWithTooltip';
+
+export const SpkAirdropTooltip = () => {
+  return (
+    <TextWithTooltip
+      wrapperProps={{ ml: 2 }}
+      color="warning.main"
+      iconSize={20}
+      icon={<image href="/icons/other/spark.svg" width={25} height={25} />}
+    >
+      <>
+        <Trans>
+          {`This asset is eligible for SPK incentive program. Aave Labs does not
+          guarantee the program and accepts no liability.\n`}
+        </Trans>
+        <br />
+        <br />
+        <Trans>{'Learn more about the SPK rewards'}</Trans>{' '}
+        <Link
+          href="https://forum.sky.money/t/spark-proposal-for-integrations-into-aave/25005"
+          sx={{ textDecoration: 'underline' }}
+          variant="caption"
+          color="text.secondary"
+        >
+          {'here'}
+        </Link>{' '}
+        <Trans>{'and about SPK program'}</Trans>{' '}
+        <Link
+          href="https://docs.spark.fi/rewards/spk-token#what-is-the-spk-pre-farming-airdrop"
+          sx={{ textDecoration: 'underline' }}
+          variant="caption"
+          color="text.secondary"
+        >
+          {'here'}
+        </Link>
+        {'.'}
+      </>
+    </TextWithTooltip>
+  );
+};

src/locales/en/messages.po

@@ -1392,6 +1392,10 @@ msgstr "Learn more"
 msgid "Learn more about risks involved"
 msgstr "Learn more about risks involved"
 
+#: src/components/infoTooltips/SpkAirdropTooltip.tsx
+msgid "Learn more about the SPK rewards"
+msgstr "Learn more about the SPK rewards"
+
 #: src/components/isolationMode/IsolatedBadge.tsx
 msgid "Learn more in our <0>FAQ guide</0>"
 msgstr "Learn more in our <0>FAQ guide</0>"
@@ -2667,6 +2671,10 @@ msgstr "This asset has reached its borrow cap. Nothing is available to be borrow
 msgid "This asset has reached its supply cap. Nothing is available to be supplied from this market."
 msgstr "This asset has reached its supply cap. Nothing is available to be supplied from this market."
 
+#: src/components/infoTooltips/SpkAirdropTooltip.tsx
+msgid "This asset is eligible for SPK incentive program. Aave Labs does not guarantee the program and accepts no liability."
+msgstr "This asset is eligible for SPK incentive program. Aave Labs does not guarantee the program and accepts no liability."
+
 #: src/components/infoTooltips/SuperFestTooltip.tsx
 msgid "This asset is eligible for rewards through SuperFest. Aave Labs does not guarantee the program and accepts no liability."
 msgstr "This asset is eligible for rewards through SuperFest. Aave Labs does not guarantee the program and accepts no liability."
@@ -3348,6 +3356,10 @@ msgstr "Zero address not valid"
 msgid "about SuperFest."
 msgstr "about SuperFest."
 
+#: src/components/infoTooltips/SpkAirdropTooltip.tsx
+msgid "and about SPK program"
+msgstr "and about SPK program"
+
 #: src/modules/markets/MarketAssetsListContainer.tsx
 msgid "assets"
 msgstr "assets"

src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx

@@ -5,7 +5,7 @@ import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useRootStore } from 'src/store/root';
 import { DashboardReserve } from 'src/utils/dashboardSortUtils';
 import { DASHBOARD } from 'src/utils/mixPanelEvents';
-import { showSuperFestTooltip, Side } from 'src/utils/utils';
+import { showExternalIncentivesTooltip, Side } from 'src/utils/utils';
 
 import { CapsHint } from '../../../../components/caps/CapsHint';
 import { CapType } from '../../../../components/caps/helper';
@@ -43,7 +43,11 @@ export const BorrowAssetsListItem = ({
       detailsAddress={underlyingAsset}
       data-cy={`dashboardBorrowListItem_${symbol.toUpperCase()}`}
       currentMarket={currentMarket}
-      showSuperFestTooltip={showSuperFestTooltip(symbol, currentMarket, Side.BORROW)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        symbol,
+        currentMarket,
+        Side.BORROW
+      )}
     >
       <ListValueColumn
         symbol={symbol}

src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListMobileItem.tsx

@@ -3,7 +3,7 @@ import { Box, Button } from '@mui/material';
 import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { DashboardReserve } from 'src/utils/dashboardSortUtils';
-import { showSuperFestTooltip, Side } from 'src/utils/utils';
+import { showExternalIncentivesTooltip, Side } from 'src/utils/utils';
 
 import { CapsHint } from '../../../../components/caps/CapsHint';
 import { CapType } from '../../../../components/caps/helper';
@@ -39,7 +39,11 @@ export const BorrowAssetsListMobileItem = ({
       name={name}
       underlyingAsset={underlyingAsset}
       currentMarket={currentMarket}
-      showSuperFestTooltip={showSuperFestTooltip(symbol, currentMarket, Side.BORROW)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        symbol,
+        currentMarket,
+        Side.BORROW
+      )}
     >
       <ListValueRow
         title={<Trans>Available to borrow</Trans>}

src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx

@@ -10,7 +10,7 @@ import { useModalContext } from 'src/hooks/useModal';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { DashboardReserve } from 'src/utils/dashboardSortUtils';
 import { isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig';
-import { showSuperFestTooltip, Side } from 'src/utils/utils';
+import { showExternalIncentivesTooltip, Side } from 'src/utils/utils';
 
 import { ListColumn } from '../../../../components/lists/ListColumn';
 import { ListAPRColumn } from '../ListAPRColumn';
@@ -140,7 +140,11 @@ const BorrowedPositionsListItemDesktop = ({
       borrowEnabled={reserve.borrowingEnabled}
       data-cy={`dashboardBorrowedListItem_${reserve.symbol.toUpperCase()}_${borrowRateMode}`}
       showBorrowCapTooltips
-      showSuperFestTooltip={showSuperFestTooltip(reserve.symbol, currentMarket, Side.BORROW)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        reserve.symbol,
+        currentMarket,
+        Side.BORROW
+      )}
     >
       <ListValueColumn symbol={reserve.symbol} value={totalBorrows} subValue={totalBorrowsUSD} />
 
@@ -223,7 +227,11 @@ const BorrowedPositionsListItemMobile = ({
       frozen={reserve.isFrozen}
       borrowEnabled={reserve.borrowingEnabled}
       showBorrowCapTooltips
-      showSuperFestTooltip={showSuperFestTooltip(symbol, currentMarket, Side.BORROW)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        symbol,
+        currentMarket,
+        Side.BORROW
+      )}
     >
       <ListValueRow
         title={<Trans>Debt</Trans>}

src/modules/dashboard/lists/ListItemWrapper.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { BorrowDisabledToolTip } from 'src/components/infoTooltips/BorrowDisabledToolTip';
 import { OffboardingTooltip } from 'src/components/infoTooltips/OffboardingToolTip';
 import { PausedTooltip } from 'src/components/infoTooltips/PausedTooltip';
+import { SpkAirdropTooltip } from 'src/components/infoTooltips/SpkAirdropTooltip';
 import { StETHCollateralToolTip } from 'src/components/infoTooltips/StETHCollateralToolTip';
 import { SuperFestTooltip } from 'src/components/infoTooltips/SuperFestTooltip';
 import { AssetsBeingOffboarded } from 'src/components/Warnings/OffboardingWarning';
@@ -11,6 +12,7 @@ import { useRootStore } from 'src/store/root';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
 import { DASHBOARD_LIST_COLUMN_WIDTHS } from 'src/utils/dashboardSortUtils';
 import { DASHBOARD } from 'src/utils/mixPanelEvents';
+import { ExternalIncentivesTooltipsConfig } from 'src/utils/utils';
 
 import { AMPLToolTip } from '../../../components/infoTooltips/AMPLToolTip';
 import { FrozenTooltip } from '../../../components/infoTooltips/FrozenTooltip';
@@ -33,7 +35,7 @@ interface ListItemWrapperProps {
   showSupplyCapTooltips?: boolean;
   showBorrowCapTooltips?: boolean;
   showDebtCeilingTooltips?: boolean;
-  showSuperFestTooltip?: boolean;
+  showExternalIncentivesTooltips?: ExternalIncentivesTooltipsConfig;
 }
 
 export const ListItemWrapper = ({
@@ -49,7 +51,10 @@ export const ListItemWrapper = ({
   showSupplyCapTooltips = false,
   showBorrowCapTooltips = false,
   showDebtCeilingTooltips = false,
-  showSuperFestTooltip = false,
+  showExternalIncentivesTooltips = {
+    superFestRewards: false,
+    spkAirdrop: false,
+  },
   ...rest
 }: ListItemWrapperProps) => {
   const { supplyCap, borrowCap, debtCeiling } = useAssetCaps();
@@ -86,7 +91,8 @@ export const ListItemWrapper = ({
           </Tooltip>
         </Link>
         {paused && <PausedTooltip />}
-        {showSuperFestTooltip && <SuperFestTooltip />}
+        {showExternalIncentivesTooltips.superFestRewards && <SuperFestTooltip />}
+        {showExternalIncentivesTooltips.spkAirdrop && <SpkAirdropTooltip />}
         {showFrozenTooltip && <FrozenTooltip symbol={symbol} currentMarket={currentMarket} />}
         {showRenFilTooltip && <RenFILToolTip />}
         {showAmplTooltip && <AMPLToolTip />}

src/modules/dashboard/lists/ListMobileItemWrapper.tsx

@@ -2,10 +2,12 @@ import { ReactNode } from 'react';
 import { BorrowDisabledToolTip } from 'src/components/infoTooltips/BorrowDisabledToolTip';
 import { OffboardingTooltip } from 'src/components/infoTooltips/OffboardingToolTip';
 import { PausedTooltip } from 'src/components/infoTooltips/PausedTooltip';
+import { SpkAirdropTooltip } from 'src/components/infoTooltips/SpkAirdropTooltip';
 import { StETHCollateralToolTip } from 'src/components/infoTooltips/StETHCollateralToolTip';
 import { SuperFestTooltip } from 'src/components/infoTooltips/SuperFestTooltip';
 import { AssetsBeingOffboarded } from 'src/components/Warnings/OffboardingWarning';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
+import { ExternalIncentivesTooltipsConfig } from 'src/utils/utils';
 
 import { AMPLToolTip } from '../../../components/infoTooltips/AMPLToolTip';
 import { FrozenTooltip } from '../../../components/infoTooltips/FrozenTooltip';
@@ -28,7 +30,7 @@ interface ListMobileItemWrapperProps {
   showBorrowCapTooltips?: boolean;
   showDebtCeilingTooltips?: boolean;
   isIsolated?: boolean;
-  showSuperFestTooltip?: boolean;
+  showExternalIncentivesTooltips?: ExternalIncentivesTooltipsConfig;
 }
 
 export const ListMobileItemWrapper = ({
@@ -46,7 +48,10 @@ export const ListMobileItemWrapper = ({
   showBorrowCapTooltips = false,
   showDebtCeilingTooltips = false,
   isIsolated = false,
-  showSuperFestTooltip = false,
+  showExternalIncentivesTooltips = {
+    superFestRewards: false,
+    spkAirdrop: false,
+  },
 }: ListMobileItemWrapperProps) => {
   const WarningComponent: React.FC = () => {
     const showFrozenTooltip = frozen && symbol !== 'renFIL';
@@ -59,7 +64,8 @@ export const ListMobileItemWrapper = ({
     return (
       <>
         {paused && <PausedTooltip />}
-        {showSuperFestTooltip && <SuperFestTooltip />}
+        {showExternalIncentivesTooltips.superFestRewards && <SuperFestTooltip />}
+        {showExternalIncentivesTooltips.spkAirdrop && <SpkAirdropTooltip />}
         {showFrozenTooltip && <FrozenTooltip symbol={symbol} currentMarket={currentMarket} />}
         {showRenFilTooltip && <RenFILToolTip />}
         {showAmplTooltip && <AMPLToolTip />}

src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListItem.tsx

@@ -6,7 +6,7 @@ import { useModalContext } from 'src/hooks/useModal';
 import { useRootStore } from 'src/store/root';
 import { DashboardReserve } from 'src/utils/dashboardSortUtils';
 import { GENERAL } from 'src/utils/mixPanelEvents';
-import { showSuperFestTooltip, Side } from 'src/utils/utils';
+import { showExternalIncentivesTooltip, Side } from 'src/utils/utils';
 
 import { ListColumn } from '../../../../components/lists/ListColumn';
 import { useProtocolDataContext } from '../../../../hooks/useProtocolDataContext';
@@ -59,7 +59,11 @@ export const SuppliedPositionsListItem = ({
       }`}
       showSupplyCapTooltips
       showDebtCeilingTooltips
-      showSuperFestTooltip={showSuperFestTooltip(reserve.symbol, currentMarket, Side.SUPPLY)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        reserve.symbol,
+        currentMarket,
+        Side.SUPPLY
+      )}
     >
       <ListValueColumn
         symbol={reserve.iconSymbol}

src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx

@@ -3,7 +3,7 @@ import { Box, Button } from '@mui/material';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { useAssetCaps } from 'src/hooks/useAssetCaps';
 import { DashboardReserve } from 'src/utils/dashboardSortUtils';
-import { showSuperFestTooltip, Side } from 'src/utils/utils';
+import { showExternalIncentivesTooltip, Side } from 'src/utils/utils';
 
 import { IncentivesCard } from '../../../../components/incentives/IncentivesCard';
 import { Row } from '../../../../components/primitives/Row';
@@ -60,7 +60,11 @@ export const SuppliedPositionsListMobileItem = ({
       frozen={reserve.isFrozen}
       showSupplyCapTooltips
       showDebtCeilingTooltips
-      showSuperFestTooltip={showSuperFestTooltip(reserve.symbol, currentMarket, Side.SUPPLY)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        reserve.symbol,
+        currentMarket,
+        Side.SUPPLY
+      )}
     >
       <ListValueRow
         title={<Trans>Supply balance</Trans>}

src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx

@@ -29,7 +29,7 @@ import { useRootStore } from 'src/store/root';
 import { DashboardReserve } from 'src/utils/dashboardSortUtils';
 import { isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig';
 import { DASHBOARD } from 'src/utils/mixPanelEvents';
-import { showSuperFestTooltip, Side } from 'src/utils/utils';
+import { showExternalIncentivesTooltip, Side } from 'src/utils/utils';
 
 import { CapsHint } from '../../../../components/caps/CapsHint';
 import { CapType } from '../../../../components/caps/helper';
@@ -153,7 +153,11 @@ export const SupplyAssetsListItemDesktop = ({
       data-cy={`dashboardSupplyListItem_${symbol.toUpperCase()}`}
       currentMarket={currentMarket}
       showDebtCeilingTooltips
-      showSuperFestTooltip={showSuperFestTooltip(symbol, currentMarket, Side.SUPPLY)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        symbol,
+        currentMarket,
+        Side.SUPPLY
+      )}
     >
       {canSupplyAsWrappedToken && wrappedToken && walletBalance === '0' ? (
         <ListColumn>
@@ -334,7 +338,11 @@ export const SupplyAssetsListItemMobile = ({
       underlyingAsset={underlyingAsset}
       currentMarket={currentMarket}
       showDebtCeilingTooltips
-      showSuperFestTooltip={showSuperFestTooltip(symbol, currentMarket, Side.SUPPLY)}
+      showExternalIncentivesTooltips={showExternalIncentivesTooltip(
+        symbol,
+        currentMarket,
+        Side.SUPPLY
+      )}
     >
       {canSupplyAsWrappedToken && wrappedToken && walletBalance === '0' ? (
         <Row

src/modules/markets/MarketAssetsListItem.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Typography } from '@mui/material';
 import { useRouter } from 'next/router';
 import { OffboardingTooltip } from 'src/components/infoTooltips/OffboardingToolTip';
 import { RenFILToolTip } from 'src/components/infoTooltips/RenFILToolTip';
+import { SpkAirdropTooltip } from 'src/components/infoTooltips/SpkAirdropTooltip';
 import { SuperFestTooltip } from 'src/components/infoTooltips/SuperFestTooltip';
 import { IsolatedEnabledBadge } from 'src/components/isolationMode/IsolatedBadge';
 import { NoData } from 'src/components/primitives/NoData';
@@ -11,7 +12,7 @@ import { AssetsBeingOffboarded } from 'src/components/Warnings/OffboardingWarnin
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useRootStore } from 'src/store/root';
 import { MARKETS } from 'src/utils/mixPanelEvents';
-import { showSuperFestTooltip, Side } from 'src/utils/utils';
+import { showExternalIncentivesTooltip, Side } from 'src/utils/utils';
 
 import { IncentivesCard } from '../../components/incentives/IncentivesCard';
 import { AMPLToolTip } from '../../components/infoTooltips/AMPLToolTip';
@@ -28,8 +29,16 @@ export const MarketAssetsListItem = ({ ...reserve }: ComputedReserveData) => {
   const trackEvent = useRootStore((store) => store.trackEvent);
 
   const offboardingDiscussion = AssetsBeingOffboarded[currentMarket]?.[reserve.symbol];
-  const isSuperfestOnSupplySide = showSuperFestTooltip(reserve.symbol, currentMarket, Side.SUPPLY);
-  const isSuperfestOnBorrowSide = showSuperFestTooltip(reserve.symbol, currentMarket, Side.BORROW);
+  const externalIncentivesTooltipsSupplySide = showExternalIncentivesTooltip(
+    reserve.symbol,
+    currentMarket,
+    Side.SUPPLY
+  );
+  const externalIncentivesTooltipsBorrowSide = showExternalIncentivesTooltip(
+    reserve.symbol,
+    currentMarket,
+    Side.BORROW
+  );
 
   return (
     <ListItem
@@ -87,7 +96,12 @@ export const MarketAssetsListItem = ({ ...reserve }: ComputedReserveData) => {
           symbol={reserve.symbol}
           variant="main16"
           symbolsVariant="secondary16"
-          tooltip={isSuperfestOnSupplySide && <SuperFestTooltip />}
+          tooltip={
+            <>
+              {externalIncentivesTooltipsSupplySide.superFestRewards && <SuperFestTooltip />}
+              {externalIncentivesTooltipsSupplySide.spkAirdrop && <SpkAirdropTooltip />}
+            </>
+          }
         />
       </ListColumn>
 
@@ -109,7 +123,12 @@ export const MarketAssetsListItem = ({ ...reserve }: ComputedReserveData) => {
           symbol={reserve.symbol}
           variant="main16"
           symbolsVariant="secondary16"
-          tooltip={isSuperfestOnBorrowSide && <SuperFestTooltip />}
+          tooltip={
+            <>
+              {externalIncentivesTooltipsBorrowSide.superFestRewards && <SuperFestTooltip />}
+              {externalIncentivesTooltipsBorrowSide.spkAirdrop && <SpkAirdropTooltip />}
+            </>
+          }
         />
         {!reserve.borrowingEnabled &&
           Number(reserve.totalVariableDebt) > 0 &&