dropdown item refactoring

ui/snippets/topBar/DeFiDropdownItem.tsx

-import { Link, Text, useColorModeValue } from '@chakra-ui/react';
-import NextLink from 'next/link';
+import { Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { DeFiDropdownItem as TDeFiDropdownItem } from 'types/client/deFiDropdown';
 
-import type { Route } from 'nextjs-routes';
 import { route } from 'nextjs-routes';
 
 import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/LinkExternal';
+import LinkInternal from 'ui/shared/LinkInternal';
 
 type Props = {
   item: TDeFiDropdownItem & { onClick: () => void };
 }
 
 const DeFiDropdownItem = ({ item }: Props) => {
-  const nextRoute: Route = { pathname: '/apps/[id]', query: { id: item.dappId || '', action: 'connect' } };
-  const href = item.dappId ? route(nextRoute) : item.url;
-
-  const content = (
-    <Link
-      href={ href }
-      target={ item.dappId ? '_self' : '_blank' }
-      w="100%"
-      h="34px"
-      display="flex"
-      alignItems="center"
-      gap={ 2 }
-      aria-label={ `${ item.text } link` }
-      whiteSpace="nowrap"
-      color={ useColorModeValue('blackAlpha.800', 'gray.400') }
-      onClick={ item.onClick }
-      _hover={{
+  const styles = {
+    width: '100%',
+    height: '34px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: useColorModeValue('blackAlpha.800', 'gray.400'),
+    textDecoration: 'none !important',
+    _hover: {
       '& *': {
         color: 'link_hovered',
       },
-      }}
-    >
-      <IconSvg name={ item.icon } boxSize={ 5 }/>
-      <Text as="span" fontSize="sm">
-        <span>{ item.text }</span>
-        { !item.dappId && <IconSvg name="arrows/north-east" boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
-      </Text>
-    </Link>
+    },
+  };
+
+  const content = (
+    <>
+      <IconSvg name={ item.icon } boxSize={ 5 } mr={ 2 }/>
+      <Text as="span" fontSize="sm">{ item.text }</Text>
+    </>
   );
 
   return item.dappId ? (
-    <NextLink href={ nextRoute } passHref legacyBehavior>
+    <LinkInternal
+      href={ route({ pathname: '/apps/[id]', query: { id: item.dappId, action: 'connect' } }) }
+      target="_self"
+      { ...styles }
+    >
       { content }
-    </NextLink>
-  ) : content;
+    </LinkInternal>
+  ) : (
+    <LinkExternal href={ item.url } { ...styles }>
+      { content }
+    </LinkExternal>
+  );
 };
 
 export default React.memo(DeFiDropdownItem);