[PRD] | [Issue #2545] add more socials

src/components/ui/links/ExternalLink.tsx

@@ -105,35 +105,31 @@ export default function ExternalLink({
   };
 
   return (
-    <Flex>
-      <Link
-        color={linkColor[styleVariant]}
-        padding="0.25rem 0.75rem"
+    <Link
+      padding="0.25rem 0.75rem"
+      color={linkColor[styleVariant]}
+      gap="0.25rem"
+      borderColor="transparent"
+      borderWidth="1px"
+      borderRadius="625rem"
+      w="fit-content"
+      _hover={isTextLink ? textLinkStyles[styleVariant].hover : pillLinkStyles[styleVariant].hover}
+      _active={
+        isTextLink ? textLinkStyles[styleVariant].active : pillLinkStyles[styleVariant].active
+      }
+      target="_blank"
+      rel="noreferrer"
+      textDecoration="none"
+      ref={internalRef}
+      {...rest}
+    >
+      <Flex
         gap="0.25rem"
-        borderRadius="625rem"
-        borderColor="transparent"
-        borderWidth="1px"
-        _hover={
-          isTextLink ? textLinkStyles[styleVariant].hover : pillLinkStyles[styleVariant].hover
-        }
-        _active={
-          isTextLink ? textLinkStyles[styleVariant].active : pillLinkStyles[styleVariant].active
-        }
-        target="_blank"
-        rel="noreferrer"
-        textDecoration="none"
-        ref={internalRef}
-        {...rest}
+        alignItems="center"
       >
-        <Flex
-          gap="0.25rem"
-          mx="-0.75rem"
-          alignItems="center"
-        >
-          {children}
-          {isTextLink && <ArrowUpRight />}
-        </Flex>
-      </Link>
-    </Flex>
+        {children}
+        {isTextLink && <ArrowUpRight />}
+      </Flex>
+    </Link>
   );
 }

src/components/ui/page/Footer.tsx

@@ -1,20 +1,59 @@
-import { Flex } from '@chakra-ui/react';
+import { Box, ComponentWithAs, Flex, Icon as ChakraIcon, IconProps } from '@chakra-ui/react';
+import { DiscordLogo, Icon, TelegramLogo, XLogo } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
-import { URL_DECENT } from '../../../constants/url';
+import { Link } from 'react-router-dom';
+import { WarpcastIcon } from '../../../assets/theme/custom/icons/WarpcastIcon';
+import {
+  URL_DECENT,
+  URL_DISCORD,
+  URL_TELEGRAM,
+  URL_TWITTER,
+  URL_WARPCAST,
+} from '../../../constants/url';
 import ExternalLink from '../links/ExternalLink';
 
+function NavigationIconLink(props: {
+  DisplayIcon: Icon | ComponentWithAs<'svg', IconProps>;
+  to: string;
+  ariaLabel: string;
+}) {
+  const { t } = useTranslation('navigation');
+  const { DisplayIcon, to, ariaLabel } = props;
+  return (
+    <Link
+      aria-label={t(ariaLabel)}
+      to={to}
+    >
+      <Box p="0.25rem">
+        <Flex
+          py="6px"
+          px="6px"
+          borderRadius={{ md: 4 }}
+          transition="all ease-out 300ms"
+          _hover={{ bgColor: 'neutral-3' }}
+        >
+          <ChakraIcon
+            as={DisplayIcon}
+            boxSize="1rem"
+          />
+        </Flex>
+      </Box>
+    </Link>
+  );
+}
+
 export function Footer() {
-  const { t } = useTranslation('home');
+  const { t } = useTranslation(['navigation', 'home']);
   return (
     <Flex
       w="100%"
       flexWrap="wrap"
       justifyContent={{ base: 'flex-start', md: 'center' }}
       alignItems="center"
-      gap={{ base: 4, md: 8 }}
+      gap={4}
     >
-      <Flex gap={4}>
-        <ExternalLink href="/docs/fractal_audit.pdf">{t('audit')}</ExternalLink>
+      <Flex>
+        <ExternalLink href="/docs/fractal_audit.pdf">{t('audit', { ns: 'home' })}</ExternalLink>
         <ExternalLink
           href={`https://github.com/decentdao/decent-interface/releases/tag/v${import.meta.env.PACKAGE_VERSION}`}
         >
@@ -27,8 +66,34 @@ export function Footer() {
         styleVariant="grey"
         fontSize="1.2rem"
       >
-        {t('madeWithLove')}
+        {t('madeWithLove', { ns: 'home' })}
       </ExternalLink>
+
+      <Flex
+        gap={4}
+        alignItems="center"
+      >
+        <NavigationIconLink
+          to={URL_TELEGRAM}
+          ariaLabel="navigationExternalTelegram"
+          DisplayIcon={TelegramLogo}
+        />
+        <NavigationIconLink
+          to={URL_TWITTER}
+          ariaLabel="navigationExternalX"
+          DisplayIcon={XLogo}
+        />
+        <NavigationIconLink
+          to={URL_WARPCAST}
+          ariaLabel="navigationExternalWarpcast"
+          DisplayIcon={WarpcastIcon}
+        />
+        <NavigationIconLink
+          to={URL_DISCORD}
+          ariaLabel="navigationExternalDiscord"
+          DisplayIcon={DiscordLogo}
+        />
+      </Flex>
     </Flex>
   );
 }

src/components/ui/page/Navigation/NavigationLinks.tsx

@@ -1,8 +1,7 @@
 import { Box, Flex, Hide } from '@chakra-ui/react';
 import { BookOpen, Coins, GitFork, House, Question, UsersThree } from '@phosphor-icons/react';
-import { WarpcastIcon } from '../../../../assets/theme/custom/icons/WarpcastIcon';
 import { DAO_ROUTES } from '../../../../constants/routes';
-import { URL_CHAT, URL_DOCS, URL_FAQ } from '../../../../constants/url';
+import { URL_DOCS, URL_FAQ } from '../../../../constants/url';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { useDaoInfoStore } from '../../../../store/daoInfo/useDaoInfoStore';
 import Divider from '../../utils/Divider';
@@ -31,14 +30,6 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) {
         scope="external"
         closeDrawer={closeDrawer}
       />
-      <NavigationLink
-        href={URL_CHAT}
-        labelKey="chat"
-        testId="navigationExternal-chat"
-        NavigationIcon={WarpcastIcon}
-        scope="external"
-        closeDrawer={closeDrawer}
-      />
       <NavigationLink
         href={URL_DOCS}
         labelKey="documentation"

src/constants/url.ts

@@ -1,5 +1,8 @@
 export const URL_FAQ = 'https://docs.decentdao.org/app/learn-more/faq';
-export const URL_CHAT = 'https://warpcast.com/~/channel/decentdao';
+export const URL_WARPCAST = 'https://warpcast.com/~/channel/decentdao';
 export const URL_DOCS = 'https://docs.decentdao.org/app';
 export const URL_DOCS_GOV_TYPES = 'https://docs.decentdao.org/app/user-guide/types';
 export const URL_DECENT = 'https://www.decentdao.org/';
+export const URL_TWITTER = 'https://x.com/decentdao';
+export const URL_TELEGRAM = 'https://t.me/+ZmKrTaL3pQcyOGRh';
+export const URL_DISCORD = 'https://discord.gg/Zh2emKspVF';

src/i18n/locales/en/navigation.json

@@ -8,5 +8,9 @@
   "faq": "FAQ",
   "chat": "Warpcast",
   "documentation": "Documentation",
-  "ariaLabelFractalBrand": "Navigate Decent Home"
+  "ariaLabelFractalBrand": "Navigate Decent Home",
+  "navigationExternalTelegram": "Go to telegram",
+  "navigationExternalX": "Go to X",
+  "navigationExternalWarpcast": "Go to Warpcast",
+  "navigationExternalDiscordmade": "Go to Discord"
 }