fix: handle infinity

Author: foodaka

src/components/incentives/IncentivesButton.tsx

@@ -20,6 +20,8 @@ import { MeritIncentivesTooltipContent } from './MeritIncentivesTooltipContent';
 import { MerklIncentivesTooltipContent } from './MerklIncentivesTooltipContent';
 import { SonicAirdropTooltipContent } from './SonicIncentivesTooltipContent';
 
+const INFINITY = 'Infinity';
+
 export type IconProps = {
   className?: string;
   width?: string | number;
@@ -263,18 +265,16 @@ export const IncentivesButton = ({
     }
   }
 
-  const isIncentivesInfinity = incentives.some(
-    (incentive) => incentive.incentiveAPR === 'Infinity'
-  );
+  const isIncentivesInfinity = incentives.some((incentive) => incentive.incentiveAPR === INFINITY);
   const incentivesAPRSum = isIncentivesInfinity
-    ? 'Infinity'
+    ? INFINITY
     : incentives.reduce((aIncentive, bIncentive) => aIncentive + +bIncentive.incentiveAPR, 0);
 
   const incentivesNetAPR = isIncentivesInfinity
-    ? 'Infinity'
-    : incentivesAPRSum !== 'Infinity'
+    ? INFINITY
+    : incentivesAPRSum !== INFINITY
     ? valueToBigNumber(incentivesAPRSum || 0).toNumber()
-    : 'Infinity';
+    : INFINITY;
 
   return (
     <ContentWithTooltip
@@ -309,7 +309,7 @@ const Content = ({
   plus,
 }: {
   incentives: ReserveIncentiveResponse[];
-  incentivesNetAPR: number | 'Infinity';
+  incentivesNetAPR: number | typeof INFINITY;
   displayBlank?: boolean;
   plus?: boolean;
 }) => {
@@ -343,7 +343,7 @@ const Content = ({
     );
 
     if (hasGhoIncentives) {
-      if (incentivesNetAPR !== 'Infinity' && incentivesNetAPR < 10000) {
+      if (incentivesNetAPR !== INFINITY && incentivesNetAPR < 10000) {
         return (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
             <FormattedNumber
@@ -355,7 +355,7 @@ const Content = ({
             <IncentivesIcon width="16" height="16" />
           </Box>
         );
-      } else if (incentivesNetAPR !== 'Infinity' && incentivesNetAPR > 9999) {
+      } else if (incentivesNetAPR !== INFINITY && incentivesNetAPR > 9999) {
         return (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
             <FormattedNumber
@@ -368,7 +368,7 @@ const Content = ({
             <IncentivesIcon width="16" height="16" />
           </Box>
         );
-      } else if (incentivesNetAPR === 'Infinity') {
+      } else if (incentivesNetAPR === INFINITY) {
         return (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
             <Typography variant="main12" color="text.secondary">
@@ -393,15 +393,12 @@ const Content = ({
   return (
     <Box
       sx={() => ({
-        // p: { xs: '0 4px', xsm: '2px 4px' },
-        // border: `1px solid ${open ? theme.palette.action.disabled : theme.palette.divider}`,
         borderRadius: '4px',
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         transition: 'opacity 0.2s ease',
-        // bgcolor: open ? 'action.hover' : 'transparent',
         '&:hover': {
           bgcolor: 'action.hover',
           borderColor: 'action.disabled',

src/components/incentives/IncentivesCard.tsx

@@ -1,6 +1,6 @@
 import { ProtocolAction } from '@aave/contract-helpers';
 import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { ReactNode } from 'react';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
 import { useMerklIncentives } from 'src/hooks/useMerklIncentives';
@@ -47,8 +47,11 @@ export const IncentivesCard = ({
 
   const protocolIncentivesAPR =
     incentives?.reduce((sum, inc) => {
-      return sum + (inc.incentiveAPR === 'Infinity' ? 0 : +inc.incentiveAPR);
-    }, 0) || 0;
+      if (inc.incentiveAPR === 'Infinity' || sum === 'Infinity') {
+        return 'Infinity';
+      }
+      return sum + +inc.incentiveAPR;
+    }, 0 as number | 'Infinity') || 0;
 
   const { data: meritIncentives } = useMeritIncentives({
     symbol,
@@ -70,9 +73,15 @@ export const IncentivesCard = ({
   const merklIncentivesAPR = merklIncentives?.breakdown?.merklIncentivesAPR || 0;
 
   const isBorrow = protocolAction === ProtocolAction.borrow;
-  const displayAPY = isBorrow
-    ? protocolAPY - protocolIncentivesAPR - meritIncentivesAPR - merklIncentivesAPR
-    : protocolAPY + protocolIncentivesAPR + meritIncentivesAPR + merklIncentivesAPR;
+
+  // If any incentive is infinite, the total should be infinite
+  const hasInfiniteIncentives = protocolIncentivesAPR === 'Infinity';
+
+  const displayAPY = hasInfiniteIncentives
+    ? 'Infinity'
+    : isBorrow
+    ? protocolAPY - (protocolIncentivesAPR as number) - meritIncentivesAPR - merklIncentivesAPR
+    : protocolAPY + (protocolIncentivesAPR as number) + meritIncentivesAPR + merklIncentivesAPR;
 
   return (
     <Box
@@ -87,15 +96,21 @@ export const IncentivesCard = ({
     >
       {value.toString() !== '-1' ? (
         <Box sx={{ display: 'flex' }}>
-          <FormattedNumber
-            data-cy={`apy`}
-            value={displayAPY}
-            percent
-            variant={variant}
-            symbolsVariant={symbolsVariant}
-            color={color}
-            symbolsColor={color}
-          />
+          {displayAPY === 'Infinity' ? (
+            <Typography variant={variant} color={color || 'text.secondary'}>
+              ∞%
+            </Typography>
+          ) : (
+            <FormattedNumber
+              data-cy={`apy`}
+              value={displayAPY}
+              percent
+              variant={variant}
+              symbolsVariant={symbolsVariant}
+              color={color}
+              symbolsColor={color}
+            />
+          )}
           {tooltip}
         </Box>
       ) : (