link theme

theme/components/Link.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { mode } from '@chakra-ui/theme-tools';
+import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
+
+const variantPrimary: SystemStyleFunction = (props) => {
+  return {
+    color: mode('blue.600', 'blue.300')(props),
+    _hover: {
+      color: mode('blue.400', 'blue.200')(props),
+    },
+  }
+}
+
+const variantSecondary: SystemStyleFunction = (props) => {
+  return {
+    color: mode('gray.500', 'gray.500')(props),
+    _hover: {
+      color: mode('gray.600', 'gray.400')(props),
+    },
+  }
+}
+
+const variants = {
+  primary: variantPrimary,
+  secondary: variantSecondary,
+}
+
+const defaultProps = {
+  variant: 'primary',
+}
+
+const Link: ComponentStyleConfig = {
+  variants,
+  defaultProps,
+}
+
+export default Link;

theme/components/index.ts

 import Button from './Button';
-import Modal from './Modal';
-import Table from './Table';
 import Form from './Form';
 import Input from './Input';
-import Tabs from './Tabs';
+import Link from './Link';
+import Modal from './Modal';
+import Table from './Table';
 import Tag from './Tag';
 import Tooltip from './Tooltip';
 
 const components = {
   Button,
-  Modal,
-  Table,
   Input,
   Form,
-  Tabs,
+  Link,
+  Modal,
+  Table,
   Tag,
   Tooltip,
 }

ui/navigation/NavFooter.tsx

@@ -30,7 +30,7 @@ const NavFooter = () => {
       <HStack>
         { SOCIAL_LINKS.map(sl => {
           return (
-            <Link href={ sl.link } key={ sl.link }>
+            <Link href={ sl.link } key={ sl.link } variant="secondary">
               <Icon as={ sl.icon } boxSize={ 5 }/>
             </Link>
           )

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -33,7 +33,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
           <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
             <Icon as={ WalletIcon } marginRight="10px" w="16px" h="16px"/>
             <Text>{ `Net worth:${ nbsp }` }</Text>
-            <Link href="#" color="blue.500" _hover={{ color: 'blue.400' }}>{ `$${ item.totalUSD } USD` }</Link>
+            <Link href="#">{ `$${ item.totalUSD } USD` }</Link>
           </HStack>
         ) }
       </VStack>