replace complex logic with one more icon

icons/merits_with_dot.svg

+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m19.133 5.85-3.239-1.637a1.98 1.98 0 0 0-1.788 0l-8 4.044A2.024 2.024 0 0 0 5 10.065v9.87c0 .766.428 1.466 1.106 1.808l8 4.044a1.981 1.981 0 0 0 1.788 0l8-4.044A2.024 2.024 0 0 0 25 19.935V11.9a5.022 5.022 0 0 1-2 0v8.035l-8 4.043-8-4.043v-9.87l8-4.043 4.123 2.083a5.02 5.02 0 0 1 .01-2.255Zm-5.177 4.83a.731.731 0 0 0-.727-.734h-.695a.731.731 0 0 0-.727.735v.636a.731.731 0 0 1-.728.735h-.352a.731.731 0 0 0-.727.735v6.532c0 .406.326.735.727.735h.695c.401 0 .727-.329.727-.735v-6.532c0-.406.326-.735.727-.735h.353c.401 0 .727-.33.727-.736v-.635Zm4.312 0a.731.731 0 0 0-.727-.734h-.695a.731.731 0 0 0-.727.735v.636c0 .406.326.735.727.735h.278c.402 0 .727.329.727.735v6.532c0 .406.326.735.727.735h.695c.401 0 .727-.329.727-.735v-6.532a.731.731 0 0 0-.727-.735h-.278a.731.731 0 0 1-.727-.736v-.635Zm-2.906 3.297c.402 0 .727.33.727.735v2.622a.731.731 0 0 1-.727.735h-.694a.731.731 0 0 1-.728-.735v-2.622c0-.406.326-.735.728-.735h.694Z" fill="currentColor"/>
+  <circle cx="24" cy="7" r="3" fill="#E53E3E"/>
+</svg>

lib/hooks/useNavItems.tsx

-import { useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -7,7 +6,6 @@ import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/naviga
 import config from 'configs/app';
 import { useRewardsContext } from 'lib/contexts/rewards';
 import { rightLineArrow } from 'lib/html-entities';
-import IconSvg from 'ui/shared/IconSvg';
 import UserAvatar from 'ui/shared/UserAvatar';
 
 interface ReturnType {
@@ -33,8 +31,6 @@ export default function useNavItems(): ReturnType {
     dailyReward,
     apiToken: rewardsApiToken,
   } = useRewardsContext();
-  const themeBgColor = useColorModeValue('white', 'black');
-  const activeItemBgColor = useColorModeValue('blue.50', 'gray.800');
 
   return React.useMemo(() => {
     let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
@@ -280,28 +276,7 @@ export default function useNavItems(): ReturnType {
         text: rewardsBalance?.total ? `${ rewardsBalance?.total } Merits` : 'Merits',
         nextRoute: { pathname: '/account/rewards' as const },
         onClick: rewardsApiToken ? undefined : openRewardsLoginModal,
-        iconComponent: () => (
-          <IconSvg
-            name="merits"
-            boxSize="30px"
-            flexShrink={ 0 }
-            position="relative"
-            _before={{
-              display: dailyReward?.available ? 'block' : 'none',
-              content: '""',
-              position: 'absolute',
-              top: '2px',
-              right: '1px',
-              width: '10px',
-              height: '10px',
-              boxSizing: 'border-box',
-              borderRadius: '50%',
-              backgroundColor: 'red.500',
-              border: '2px solid',
-              borderColor: pathname === '/account/rewards' ? activeItemBgColor : themeBgColor,
-            }}
-          />
-        ),
+        icon: dailyReward?.available ? 'merits_with_dot' : 'merits',
         isActive: pathname === '/account/rewards',
       } : null,
       {
@@ -344,5 +319,5 @@ export default function useNavItems(): ReturnType {
     };
 
     return { mainNavItems, accountNavItems, profileItem };
-  }, [ pathname, openRewardsLoginModal, rewardsBalance, dailyReward, rewardsApiToken, activeItemBgColor, themeBgColor ]);
+  }, [ pathname, openRewardsLoginModal, rewardsBalance, dailyReward, rewardsApiToken ]);
 }

public/icons/name.d.ts

@@ -86,6 +86,7 @@
 	| "link"
 	| "lock"
 	| "merits_colored"
+	| "merits_with_dot"
 	| "merits"
 	| "minus"
 	| "monaco/file"