fix: external links (#133)

* fix: footer external links

* fix: ButtonLinkSecondary external links

* fix: docs external links

src/components/UI/ButtonLinkSecondary.tsx

@@ -9,14 +9,21 @@ interface Props extends LinkProps {
 
 export const ButtonLinkSecondary: React.FC<Props> = ({ href, children, ...restProps }) => {
   const isExternal: boolean = href.toString().startsWith('http');
+
   const variant = LinkTheme.variants['button-link-secondary'];
   return (
     <Stack sx={{ mt: '0 !important' }} {...variant}>
-      <NextLink href={href} passHref {...restProps}>
-        <Link variant='button-link-secondary' isExternal={isExternal}>
+      {isExternal ? (
+        <Link variant='button-link-secondary' href={href.toString()} isExternal>
+          <Text textStyle='home-section-link-label'>{children}</Text>
+        </Link>
+      ) : (
+        <NextLink href={href.toString()} passHref {...restProps}>
+          <Link variant='button-link-secondary'>
             <Text textStyle='home-section-link-label'>{children}</Text>
           </Link>
         </NextLink>
+      )}
     </Stack>
   );
 };

src/components/UI/docs/MDComponents.tsx

@@ -28,14 +28,15 @@ const MDComponents = {
   },
   // links
   a: ({ children, href }: any) => {
-    return (
-      <NextLink href={href} passHref>
-        <Link
-          isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
-          variant='light'
-        >
+    const isExternal = href.startsWith('http') && !href.includes('geth.ethereum.org');
+
+    return isExternal ? (
+      <Link href={href} isExternal variant='light'>
         {children}
       </Link>
+    ) : (
+      <NextLink href={href} passHref>
+        <Link variant='light'>{children}</Link>
       </NextLink>
     );
   },

src/components/layouts/Footer.tsx

@@ -82,11 +82,9 @@ export const Footer: FC = () => {
             _hover={hoverStyles}
             p={4}
           >
-            <NextLink href={GETH_TWITTER_URL} passHref>
-              <Link isExternal>
+            <Link href={GETH_TWITTER_URL} isExternal>
               <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
             </Link>
-            </NextLink>
           </Center>
 
           <Center
@@ -98,24 +96,15 @@ export const Footer: FC = () => {
             borderColor='primary'
             p={4}
           >
-            <NextLink href={GETH_DISCORD_URL} passHref>
-              <Link isExternal>
+            <Link href={GETH_DISCORD_URL} isExternal>
               <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
             </Link>
-            </NextLink>
           </Center>
 
-          <Center
-            data-group
-            flex={1}
-            _hover={hoverStyles}
-            p={4}
-          >
-            <NextLink href={GETH_REPO_URL} passHref>
-              <Link isExternal>
+          <Center data-group flex={1} _hover={hoverStyles} p={4}>
+            <Link href={GETH_REPO_URL} isExternal>
               <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
             </Link>
-            </NextLink>
           </Center>
         </Flex>
       </Flex>