move favorite icon to separate file

ui/marketplace/Banner/FeaturedApp.tsx

@@ -7,8 +7,8 @@ import type { MarketplaceAppPreview } from 'types/client/marketplace';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
-import IconSvg from 'ui/shared/IconSvg';
 
+import FavoriteIcon from '../FavoriteIcon';
 import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
 import FeaturedAppMobile from './FeaturedAppMobile';
 
@@ -32,7 +32,6 @@ const FeaturedApp = ({
   const categoriesLabel = categories.join(', ');
 
   const backgroundColor = useColorModeValue('purple.50', 'whiteAlpha.100');
-  const heartFilledColor = useColorModeValue('blue.700', 'gray.400');
 
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
@@ -136,13 +135,7 @@ const FeaturedApp = ({
                 w={ 9 }
                 h={ 8 }
                 onClick={ handleFavoriteClick }
-                icon={ (
-                  <IconSvg
-                    name={ isFavorite ? 'heart_filled' : 'heart_outline' }
-                    color={ isFavorite ? heartFilledColor : 'gray.400' }
-                    boxSize={ 5 }
-                  />
-                ) }
+                icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
               />
             ) }
           </Flex>

ui/marketplace/Banner/FeaturedAppMobile.tsx

@@ -4,8 +4,7 @@ import React from 'react';
 
 import type { MarketplaceAppPreview } from 'types/client/marketplace';
 
-import IconSvg from 'ui/shared/IconSvg';
-
+import FavoriteIcon from '../FavoriteIcon';
 import MarketplaceAppCardLink from '../MarketplaceAppCardLink';
 import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
 
@@ -36,7 +35,6 @@ const FeaturedAppMobile = ({
   const categoriesLabel = categories.join(', ');
 
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
-  const heartFilledColor = useColorModeValue('blue.700', 'gray.400');
 
   return (
     <LinkBox
@@ -145,13 +143,7 @@ const FeaturedAppMobile = ({
             w={ 9 }
             h={ 8 }
             onClick={ onFavoriteClick }
-            icon={ (
-              <IconSvg
-                name={ isFavorite ? 'heart_filled' : 'heart_outline' }
-                color={ isFavorite ? heartFilledColor : 'gray.400' }
-                boxSize={ 5 }
-              />
-            ) }
+            icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
           />
         ) }
       </Flex>

ui/marketplace/FavoriteIcon.tsx

@@ -0,0 +1,24 @@
+import { useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  isFavorite: boolean;
+  color?: string;
+}
+
+const FavoriteIcon = ({ isFavorite, color }: Props) => {
+  const heartFilledColor = useColorModeValue('blue.700', 'gray.400');
+  const defaultColor = isFavorite ? heartFilledColor : 'gray.400';
+
+  return (
+    <IconSvg
+      name={ isFavorite ? 'heart_filled' : 'heart_outline' }
+      color={ color || defaultColor }
+      boxSize={ 5 }
+    />
+  );
+};
+
+export default FavoriteIcon;

ui/marketplace/MarketplaceAppCard.tsx

@@ -5,9 +5,9 @@ import React, { useCallback } from 'react';
 import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } from 'types/client/marketplace';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import IconSvg from 'ui/shared/IconSvg';
 
 import AppSecurityReport from './AppSecurityReport';
+import FavoriteIcon from './FavoriteIcon';
 import MarketplaceAppCardLink from './MarketplaceAppCardLink';
 import MarketplaceAppIntegrationIcon from './MarketplaceAppIntegrationIcon';
 import Rating from './Rating/Rating';
@@ -56,8 +56,6 @@ const MarketplaceAppCard = ({
   const isMobile = useIsMobile();
   const categoriesLabel = categories.join(', ');
 
-  const heartFilledColor = useColorModeValue('blue.700', 'gray.400');
-
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
     onInfoClick(id);
@@ -189,13 +187,7 @@ const MarketplaceAppCard = ({
                 w={{ base: 6, md: '30px' }}
                 h={{ base: 6, md: '30px' }}
                 onClick={ handleFavoriteClick }
-                icon={ (
-                  <IconSvg
-                    name={ isFavorite ? 'heart_filled' : 'heart_outline' }
-                    color={ isFavorite ? heartFilledColor : 'gray.400' }
-                    boxSize={ 5 }
-                  />
-                ) }
+                icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
               />
             </Flex>
           </Flex>

ui/marketplace/MarketplaceAppModal.tsx

@@ -15,6 +15,7 @@ import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
 import AppSecurityReport from './AppSecurityReport';
+import FavoriteIcon from './FavoriteIcon';
 import MarketplaceAppModalLink from './MarketplaceAppModalLink';
 import Rating from './Rating/Rating';
 import type { RateFunction } from './Rating/useRatings';
@@ -206,13 +207,7 @@ const MarketplaceAppModal = ({
                   w={ 9 }
                   h={ 8 }
                   onClick={ handleFavoriteClick }
-                  icon={ (
-                    <IconSvg
-                      name={ isFavorite ? 'heart_filled' : 'heart_outline' }
-                      color={ useColorModeValue('blue.700', 'gray.400') }
-                      boxSize={ 5 }
-                    />
-                  ) }
+                  icon={ <FavoriteIcon isFavorite={ isFavorite } color={ useColorModeValue('blue.700', 'gray.400') }/> }
                 />
               </Flex>
             </Flex>