fix: hide Merit value next to tooltip button for GHO (#2587)

Author: AGMASO

src/components/incentives/IncentivesButton.tsx

@@ -132,6 +132,7 @@ export const MeritIncentivesButton = (params: {
   protocolAction?: ProtocolAction;
   protocolAPY?: number;
   protocolIncentives?: ReserveIncentiveResponse[];
+  hideValue?: boolean;
 }) => {
   const [open, setOpen] = useState(false);
   const { data: meritIncentives } = useMeritIncentives(params);
@@ -150,7 +151,11 @@ export const MeritIncentivesButton = (params: {
       setOpen={setOpen}
       open={open}
     >
-      <Content incentives={[meritIncentives]} incentivesNetAPR={displayValue} />
+      <Content
+        incentives={[meritIncentives]}
+        incentivesNetAPR={displayValue}
+        hideValue={params.hideValue}
+      />
     </ContentWithTooltip>
   );
 };
@@ -307,11 +312,13 @@ const Content = ({
   incentivesNetAPR,
   displayBlank,
   plus,
+  hideValue,
 }: {
   incentives: ReserveIncentiveResponse[];
   incentivesNetAPR: number | typeof INFINITY;
   displayBlank?: boolean;
   plus?: boolean;
+  hideValue?: boolean;
 }) => {
   const [open, setOpen] = useState(false);
   const trackEvent = useRootStore((store) => store.trackEvent);
@@ -341,7 +348,13 @@ const Content = ({
         incentive.rewardTokenSymbol?.toLowerCase().includes('agho') ||
         incentive.rewardTokenSymbol?.toLowerCase().includes('abasgho')
     );
-
+    if (hideValue && hasGhoIncentives) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <IncentivesIcon width="16" height="16" />
+        </Box>
+      );
+    }
     if (hasGhoIncentives) {
       if (incentivesNetAPR !== INFINITY && incentivesNetAPR < 10000) {
         return (

src/components/incentives/IncentivesCard.tsx

@@ -1,6 +1,7 @@
 import { ProtocolAction } from '@aave/contract-helpers';
 import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
 import { Box, Typography } from '@mui/material';
+import { useRouter } from 'next/router';
 import { ReactNode } from 'react';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
 import { useMerklIncentives } from 'src/hooks/useMerklIncentives';
@@ -45,6 +46,8 @@ export const IncentivesCard = ({
   protocolAction,
   inlineIncentives = false,
 }: IncentivesCardProps) => {
+  const router = useRouter();
+
   const protocolAPY = typeof value === 'string' ? parseFloat(value) : value;
 
   const protocolIncentivesAPR =
@@ -85,6 +88,10 @@ export const IncentivesCard = ({
     ? protocolAPY - (protocolIncentivesAPR as number) - meritIncentivesAPR - merklIncentivesAPR
     : protocolAPY + (protocolIncentivesAPR as number) + meritIncentivesAPR + merklIncentivesAPR;
 
+  const isSghoPage =
+    typeof router?.asPath === 'string' && router.asPath.toLowerCase().startsWith('/sgho');
+  const hideMeritValue = symbol === 'GHO' && !isSghoPage;
+
   const incentivesContent = (
     <>
       <IncentivesButton
@@ -95,13 +102,16 @@ export const IncentivesCard = ({
         protocolAPY={protocolAPY}
         address={address}
       />
+
       <MeritIncentivesButton
         symbol={symbol}
         market={market}
         protocolAction={protocolAction}
         protocolAPY={protocolAPY}
         protocolIncentives={incentives || []}
+        hideValue={hideMeritValue}
       />
+
       <MerklIncentivesButton
         market={market}
         rewardedAsset={address}