refactor: move incentives calculation to parent component

Author: AGMASO

src/modules/markets/MarketAssetsList.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro';
 import { useMediaQuery } from '@mui/material';
 import { useState } from 'react';
+import { mapAaveProtocolIncentives } from 'src/components/incentives/incentives.helper';
 import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip';
 import { ListColumn } from 'src/components/lists/ListColumn';
 import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle';
@@ -45,6 +46,10 @@ type MarketAssetsListProps = {
   reserves: ReserveWithId[];
   loading: boolean;
 };
+export type ReserveWithProtocolIncentives = ReserveWithId & {
+  supplyProtocolIncentives: ReturnType<typeof mapAaveProtocolIncentives>;
+  borrowProtocolIncentives: ReturnType<typeof mapAaveProtocolIncentives>;
+};
 
 export default function MarketAssetsList({ reserves, loading }: MarketAssetsListProps) {
   const isTableChangedToCards = useMediaQuery('(max-width:1125px)');
@@ -93,7 +98,11 @@ export default function MarketAssetsList({ reserves, loading }: MarketAssetsList
       ? (aValue as number) - (bValue as number)
       : (bValue as number) - (aValue as number);
   });
-
+  const reservesWithIncentives: ReserveWithProtocolIncentives[] = sortedReserves.map((reserve) => ({
+    ...reserve,
+    supplyProtocolIncentives: mapAaveProtocolIncentives(reserve.incentives, 'supply'),
+    borrowProtocolIncentives: mapAaveProtocolIncentives(reserve.incentives, 'borrow'),
+  }));
   // Show loading state when loading
   if (loading) {
     return isTableChangedToCards ? (
@@ -141,7 +150,7 @@ export default function MarketAssetsList({ reserves, loading }: MarketAssetsList
         </ListHeaderWrapper>
       )}
 
-      {sortedReserves.map((reserve) =>
+      {reservesWithIncentives.map((reserve) =>
         isTableChangedToCards ? (
           <MarketAssetsListMobileItem {...reserve} key={reserve.id} />
         ) : (

src/modules/markets/MarketAssetsListItem.tsx

@@ -17,17 +17,16 @@ import { MARKETS } from 'src/utils/events';
 import { showExternalIncentivesTooltip } from 'src/utils/utils';
 import { useShallow } from 'zustand/shallow';
 
-import { mapAaveProtocolIncentives } from '../../components/incentives/incentives.helper';
 import { IncentivesCard } from '../../components/incentives/IncentivesCard';
 import { AMPLToolTip } from '../../components/infoTooltips/AMPLToolTip';
 import { ListColumn } from '../../components/lists/ListColumn';
 import { ListItem } from '../../components/lists/ListItem';
 import { FormattedNumber } from '../../components/primitives/FormattedNumber';
 import { Link, ROUTES } from '../../components/primitives/Link';
 import { TokenIcon } from '../../components/primitives/TokenIcon';
-import { ReserveWithId } from '../../hooks/app-data-provider/useAppDataProvider';
+import { ReserveWithProtocolIncentives } from './MarketAssetsList';
 
-export const MarketAssetsListItem = ({ ...reserve }: ReserveWithId) => {
+export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentives) => {
   const router = useRouter();
   const [trackEvent, currentMarket] = useRootStore(
     useShallow((store) => [store.trackEvent, store.currentMarket])
@@ -55,9 +54,6 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithId) => {
       ? iconSymbol
       : reserve.underlyingToken.symbol;
 
-  const supplyProtocolIncentives = mapAaveProtocolIncentives(reserve.incentives, 'supply');
-  const borrowProtocolIncentives = mapAaveProtocolIncentives(reserve.incentives, 'borrow');
-
   return (
     <ListItem
       px={6}
@@ -112,7 +108,7 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithId) => {
       <ListColumn>
         <IncentivesCard
           value={reserve.supplyInfo.apy.value}
-          incentives={supplyProtocolIncentives}
+          incentives={reserve.supplyProtocolIncentives}
           address={reserve.aToken.address}
           symbol={reserve.underlyingToken.symbol}
           variant="main16"
@@ -151,7 +147,7 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithId) => {
               ? String(reserve.borrowInfo?.apy.value)
               : '-1'
           }
-          incentives={borrowProtocolIncentives}
+          incentives={reserve.borrowProtocolIncentives}
           address={reserve.vToken.address}
           symbol={reserve.underlyingToken.symbol}
           variant="main16"

src/modules/markets/MarketAssetsListMobileItem.tsx

@@ -13,15 +13,14 @@ import { MARKETS } from 'src/utils/events';
 import { showExternalIncentivesTooltip } from 'src/utils/utils';
 import { useShallow } from 'zustand/shallow';
 
-import { mapAaveProtocolIncentives } from '../../components/incentives/incentives.helper';
 import { IncentivesCard } from '../../components/incentives/IncentivesCard';
 import { FormattedNumber } from '../../components/primitives/FormattedNumber';
 import { Link, ROUTES } from '../../components/primitives/Link';
 import { Row } from '../../components/primitives/Row';
-import { ReserveWithId } from '../../hooks/app-data-provider/useAppDataProvider';
 import { ListMobileItemWrapper } from '../dashboard/lists/ListMobileItemWrapper';
+import { ReserveWithProtocolIncentives } from './MarketAssetsList';
 
-export const MarketAssetsListMobileItem = ({ ...reserve }: ReserveWithId) => {
+export const MarketAssetsListMobileItem = ({ ...reserve }: ReserveWithProtocolIncentives) => {
   const [trackEvent, currentMarket] = useRootStore(
     useShallow((store) => [store.trackEvent, store.currentMarket])
   );
@@ -47,9 +46,6 @@ export const MarketAssetsListMobileItem = ({ ...reserve }: ReserveWithId) => {
       ? iconSymbol
       : reserve.underlyingToken.symbol;
 
-  const supplyProtocolIncentives = mapAaveProtocolIncentives(reserve.incentives, 'supply');
-  const borrowProtocolIncentives = mapAaveProtocolIncentives(reserve.incentives, 'borrow');
-
   return (
     <ListMobileItemWrapper
       symbol={reserve.underlyingToken.symbol}
@@ -89,7 +85,7 @@ export const MarketAssetsListMobileItem = ({ ...reserve }: ReserveWithId) => {
         <IncentivesCard
           align="flex-end"
           value={reserve.supplyInfo.apy.value}
-          incentives={supplyProtocolIncentives}
+          incentives={reserve.supplyProtocolIncentives}
           address={reserve.aToken.address}
           symbol={reserve.underlyingToken.symbol}
           variant="secondary14"
@@ -150,7 +146,7 @@ export const MarketAssetsListMobileItem = ({ ...reserve }: ReserveWithId) => {
               ? String(reserve.borrowInfo.apy.value)
               : '-1'
           }
-          incentives={borrowProtocolIncentives}
+          incentives={reserve.borrowProtocolIncentives}
           address={reserve.vToken.address}
           symbol={reserve.underlyingToken.symbol}
           variant="secondary14"