refactor: move static tag to the navItem conf array

safe-global · May 29, 2024 · 25d775a · 25d775a
1 parent bcb9672
commit 25d775a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx
@@ -9,11 +9,13 @@ import AppsIcon from '@/public/images/apps/apps-icon.svg'
 import SettingsIcon from '@/public/images/sidebar/settings.svg'
 import SwapIcon from '@/public/images/common/swap.svg'
 import { SvgIcon } from '@mui/material'
+import Chip from '@mui/material/Chip'
 
 export type NavItem = {
   label: string
   icon?: ReactElement
   href: string
+  tag?: ReactElement
 }
 
 export const navItems: NavItem[] = [
@@ -31,6 +33,7 @@ export const navItems: NavItem[] = [
     label: 'Swap',
     icon: <SvgIcon component={SwapIcon} inheritViewBox />,
     href: AppRoutes.swap,
+    tag: <Chip label="New" color="success" sx={{ ml: 1 }} />,
   },
   {
     label: 'Transactions',

diff --git a/src/components/sidebar/SidebarNavigation/index.tsx b/src/components/sidebar/SidebarNavigation/index.tsx
@@ -19,7 +19,6 @@ import { FeatureRoutes, hasFeature } from '@/utils/chains'
 import { trackEvent } from '@/services/analytics'
 import { SWAP_EVENTS, SWAP_LABELS } from '@/services/analytics/events/swaps'
 import useIsCounterfactualSafe from '@/features/counterfactual/hooks/useIsCounterfactualSafe'
-import Chip from '@mui/material/Chip'
 
 const getSubdirectory = (pathname: string): string => {
   return pathname.split('/')[1]
@@ -32,17 +31,14 @@ const isRouteEnabled = (route: string, chain?: ChainInfo) => {
   return !featureRoute || hasFeature(chain, featureRoute)
 }
 
-const NavItemLabel = ({ item }: { item: NavItem }) => {
+const NavItemTag = ({ item }: { item: NavItem }) => {
   const queueSize = useQueuedTxsLength()
 
   if (item.href === AppRoutes.transactions.history) {
     return <SidebarListItemCounter count={queueSize} />
   }
 
-  if (item.href === AppRoutes.swap) {
-    return <Chip label="New" color="success" sx={{ ml: 1 }} />
-  }
-  return null
+  return item.tag
 }
 
 const Navigation = (): ReactElement => {
@@ -105,7 +101,7 @@ const Navigation = (): ReactElement => {
               <SidebarListItemText data-testid="sidebar-list-item" bold>
                 {item.label}
 
-                <NavItemLabel item={item} />
+                <NavItemTag item={item} />
               </SidebarListItemText>
             </SidebarListItemButton>
           </ListItem>