✨ Improve Merit tooltip

src/components/incentives/MeritIncentivesTooltipContent.tsx

@@ -24,15 +24,18 @@ export const MeritIncentivesTooltipContent = ({
         justifyContent: 'center',
         alignItems: 'start',
         flexDirection: 'column',
+        gap: '10px',
       }}
     >
-      <Typography variant="caption" color="text.primary" mb={3}>
+      <img src={`/icons/other/aci.svg`} width="100px" height="40px" alt="" />
+
+      <Typography variant="caption" color="text.primary" fontSize={13}>
         <Trans>Eligible for the Merit program.</Trans>
       </Typography>
 
-      <Typography variant="caption" color="text.secondary" mb={3}>
+      <Typography variant="caption" color="text.secondary">
         <Trans>
-          This is a program initiated and implemented by the decentralised Aave community. Aave Labs
+          This is a program initiated and implemented by the Aave Chan Initiative (ACI). Aave Labs
           does not guarantee the program and accepts no liability.
         </Trans>{' '}
         <Link
@@ -49,23 +52,37 @@ export const MeritIncentivesTooltipContent = ({
         </Link>
       </Typography>
 
-      <Typography variant="caption" color="text.secondary" mb={3}>
-        <Trans>Merit Program rewards are claimed through the</Trans>{' '}
+      {meritIncentives.customMessage ? (
+        <Typography variant="caption" color="text.primary">
+          <Trans>{meritIncentives.customMessage}</Trans>
+        </Typography>
+      ) : null}
+
+      <Typography variant="caption" color="text.strong" fontSize={13} fontWeight={'600'}>
+        <Trans>Merit Program rewards are claimed through the</Trans>
         <Link
-          href="https://apps.aavechan.com/merit"
-          sx={{ textDecoration: 'underline' }}
+          href={`https://apps.aavechan.com/merit/${meritIncentives.action}`}
+          sx={{ textDecoration: 'underline', ml: 1 }}
           variant="caption"
-          color="text.secondary"
         >
-          Aave Chan Initiative interface
+          <span
+            style={{
+              fontSize: '13px',
+              fontWeight: '600',
+            }}
+          >
+            {'Aave Chan Initiative interface'}
+          </span>
         </Link>
-        {'.'}
+        <span
+          style={{
+            fontSize: '13px',
+            fontWeight: '600',
+          }}
+        >
+          {'.'}
+        </span>
       </Typography>
-      {meritIncentives.customMessage ? (
-        <Typography variant="caption" color="text.strong" mb={3}>
-          <Trans>{meritIncentives.customMessage}</Trans>
-        </Typography>
-      ) : null}
 
       <Box sx={{ width: '100%' }}>
         <Row

src/components/incentives/ZkSyncIgniteIncentivesTooltipContent.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro';
 import { Box, Typography } from '@mui/material';
-import { ExtendedReserveIncentiveResponse } from 'src/hooks/useMeritIncentives';
+import { ExtendedReserveIncentiveResponse } from 'src/hooks/useZkSyncIgniteIncentives';
 
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { Link } from '../primitives/Link';

src/hooks/useMeritIncentives.ts

@@ -43,6 +43,7 @@ type MeritIncentives = {
 };
 
 export type ExtendedReserveIncentiveResponse = ReserveIncentiveResponse & {
+  action: MeritAction;
   customMessage: string;
   customForumLink: string;
 };
@@ -51,9 +52,9 @@ const url = 'https://apps.aavechan.com/api/merit/aprs';
 
 export type MeritReserveIncentiveData = Omit<ReserveIncentiveResponse, 'incentiveAPR'> & {
   action: MeritAction;
-  protocolAction?: ProtocolAction;
   customMessage?: string;
   customForumLink?: string;
+  protocolAction?: ProtocolAction;
 };
 
 const getMeritData = (market: string, symbol: string): MeritReserveIncentiveData[] | undefined =>
@@ -348,6 +349,7 @@ export const useMeritIncentives = ({
         incentiveAPR: (APR / 100).toString(),
         rewardTokenAddress: incentive.rewardTokenAddress,
         rewardTokenSymbol: incentive.rewardTokenSymbol,
+        action: incentive.action,
         customMessage: incentive.customMessage,
         customForumLink: incentive.customForumLink,
       } as ExtendedReserveIncentiveResponse;

src/locales/en/messages.po

@@ -978,10 +978,6 @@ msgstr "Rewards can be claimed through"
 msgid "This is a program initiated and implemented by the decentralised ZKSync community. Aave Labs does not guarantee the program and accepts no liability."
 msgstr "This is a program initiated and implemented by the decentralised ZKSync community. Aave Labs does not guarantee the program and accepts no liability."
 
-#: src/components/incentives/MeritIncentivesTooltipContent.tsx
-msgid "This is a program initiated and implemented by the decentralised Aave community. Aave Labs does not guarantee the program and accepts no liability."
-msgstr "This is a program initiated and implemented by the decentralised Aave community. Aave Labs does not guarantee the program and accepts no liability."
-
 #: pages/500.page.tsx
 msgid "Sorry, an unexpected error happened. In the meantime you may try reloading the page, or come back later."
 msgstr "Sorry, an unexpected error happened. In the meantime you may try reloading the page, or come back later."
@@ -1985,6 +1981,10 @@ msgstr "Addresses"
 msgid "The requested amount is greater than the max loan size in stable rate mode"
 msgstr "The requested amount is greater than the max loan size in stable rate mode"
 
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+msgid "This is a program initiated and implemented by the Aave Chan Initiative (ACI). Aave Labs does not guarantee the program and accepts no liability."
+msgstr "This is a program initiated and implemented by the Aave Chan Initiative (ACI). Aave Labs does not guarantee the program and accepts no liability."
+
 #: pages/index.page.tsx
 #: src/components/transactions/Supply/SupplyModal.tsx
 #: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListItem.tsx