fix: token icons on incentives [skip cypress] (#2210)

aave · Oct 10, 2024 · 3b5846c · 3b5846c · github-actions · Oct 10, 2024
1 parent 83b4835
commit 3b5846c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 57 deletions.
diff --git a/src/components/incentives/IncentivesButton.tsx b/src/components/incentives/IncentivesButton.tsx
@@ -10,7 +10,7 @@ import { DASHBOARD } from 'src/utils/mixPanelEvents';
 import { ContentWithTooltip } from '../ContentWithTooltip';
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { TokenIcon } from '../primitives/TokenIcon';
-import { IncentivesTooltipContent } from './IncentivesTooltipContent';
+import { getSymbolMap, IncentivesTooltipContent } from './IncentivesTooltipContent';
 import { MeritIncentivesTooltipContent } from './MeritIncentivesTooltipContent';
 
 interface IncentivesButtonProps {
@@ -229,23 +229,29 @@ const Content = ({
         <>
           {incentives.length < 5 ? (
             <>
-              {incentives.map((incentive) => (
-                <TokenIcon
-                  symbol={incentive.rewardTokenSymbol}
-                  sx={{ fontSize: `${iconSize}px`, ml: -1 }}
-                  key={incentive.rewardTokenSymbol}
-                />
-              ))}
+              {incentives.map(getSymbolMap).map((incentive) => {
+                return (
+                  <TokenIcon
+                    aToken={incentive.aToken}
+                    symbol={incentive.tokenIconSymbol}
+                    sx={{ fontSize: `${iconSize}px`, ml: -1 }}
+                    key={incentive.tokenIconSymbol}
+                  />
+                );
+              })}
             </>
           ) : (
             <>
-              {incentives.slice(0, 3).map((incentive) => (
-                <TokenIcon
-                  symbol={incentive.rewardTokenSymbol}
-                  sx={{ fontSize: `${iconSize}px`, ml: -1 }}
-                  key={incentive.rewardTokenSymbol}
-                />
-              ))}
+              {incentives
+                .slice(0, 3)
+                .map(getSymbolMap)
+                .map((incentive) => (
+                  <TokenIcon
+                    symbol={incentive.tokenIconSymbol}
+                    sx={{ fontSize: `${iconSize}px`, ml: -1 }}
+                    key={incentive.tokenIconSymbol}
+                  />
+                ))}
               <SvgIcon
                 sx={{
                   fontSize: `${iconSize}px`,

diff --git a/src/components/incentives/IncentivesTooltipContent.tsx b/src/components/incentives/IncentivesTooltipContent.tsx
@@ -36,6 +36,23 @@ interface IncentivesTooltipContentProps {
   symbol: string;
 }
 
+export const getSymbolMap = (incentive: ReserveIncentiveResponse) => {
+  const rewardTokenSymbol = incentive.rewardTokenSymbol;
+
+  return IncentivesSymbolMap[rewardTokenSymbol]
+    ? {
+        ...IncentivesSymbolMap[rewardTokenSymbol],
+        rewardTokenAddress: incentive.rewardTokenAddress,
+        incentiveAPR: incentive.incentiveAPR,
+      }
+    : {
+        ...incentive,
+        tokenIconSymbol: rewardTokenSymbol,
+        symbol: rewardTokenSymbol,
+        aToken: false,
+      };
+};
+
 export const IncentivesTooltipContent = ({
   incentives,
   incentivesNetAPR,
@@ -65,23 +82,6 @@ export const IncentivesTooltipContent = ({
     );
   };
 
-  const getSymbolMap = (incentive: ReserveIncentiveResponse) => {
-    const rewardTokenSymbol = incentive.rewardTokenSymbol;
-
-    return IncentivesSymbolMap[rewardTokenSymbol]
-      ? {
-          ...IncentivesSymbolMap[rewardTokenSymbol],
-          rewardTokenAddress: incentive.rewardTokenAddress,
-          incentiveAPR: incentive.incentiveAPR,
-        }
-      : {
-          ...incentive,
-          tokenIconSymbol: rewardTokenSymbol,
-          symbol: rewardTokenSymbol,
-          aToken: false,
-        };
-  };
-
   return (
     <Box
       sx={{
@@ -96,31 +96,33 @@ export const IncentivesTooltipContent = ({
       </Typography>
 
       <Box sx={{ width: '100%' }}>
-        {incentives.map(getSymbolMap).map((incentive) => (
-          <Row
-            height={32}
-            caption={
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  mb: incentives.length > 1 ? 2 : 0,
-                }}
-              >
-                <TokenIcon
-                  aToken={incentive.aToken}
-                  symbol={incentive.tokenIconSymbol}
-                  sx={{ fontSize: '20px', mr: 1 }}
-                />
-                <Typography variant={typographyVariant}>{incentive.symbol}</Typography>
-              </Box>
-            }
-            key={incentive.rewardTokenAddress}
-            width="100%"
-          >
-            <Number incentiveAPR={incentive.incentiveAPR} />
-          </Row>
-        ))}
+        {incentives.map(getSymbolMap).map((incentive) => {
+          return (
+            <Row
+              height={32}
+              caption={
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    mb: incentives.length > 1 ? 2 : 0,
+                  }}
+                >
+                  <TokenIcon
+                    aToken={incentive.aToken}
+                    symbol={incentive.tokenIconSymbol}
+                    sx={{ fontSize: '20px', mr: 1 }}
+                  />
+                  <Typography variant={typographyVariant}>{incentive.symbol}</Typography>
+                </Box>
+              }
+              key={incentive.rewardTokenAddress}
+              width="100%"
+            >
+              <Number incentiveAPR={incentive.incentiveAPR} />
+            </Row>
+          );
+        })}
 
         {incentives.length > 1 && (
           <Box sx={() => ({ pt: 1, mt: 1 })}>