OCT-2097: Bring Twitter/X link back to the app

client/cypress/e2e/_05layoutFooter.cy.ts

@@ -12,7 +12,7 @@ import { ROOT, ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
 
 chai.use(chaiColors);
 
-Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => {
+Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => {
   describe(`[AW IS CLOSED] LayoutFooter: ${device}`, { viewportHeight, viewportWidth }, () => {
     before(() => {
       cy.clearLocalStorage();
@@ -76,26 +76,29 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) =>
         .should('eq', '_blank');
     });
 
-    it('Discord link is visible, has correct text and attributes', () => {
-      cy.get('[data-test=LayoutFooter__link--discord]').should('be.visible');
-      cy.get('[data-test=LayoutFooter__link--discord]').invoke('text').should('eq', '→ Discord');
-      cy.get('[data-test=LayoutFooter__link--discord]')
+    it('Blog link is visible, has correct text and attributes', () => {
+      cy.get('[data-test=LayoutFooter__link--blog]').should('be.visible');
+      cy.get('[data-test=LayoutFooter__link--blog]').invoke('text').should('eq', '→ Blog');
+      cy.get('[data-test=LayoutFooter__link--blog]')
         .invoke('attr', 'href')
-        .should('eq', 'https://discord.gg/octant');
-      cy.get('[data-test=LayoutFooter__link--discord]')
+        .should('eq', 'https://blog.octant.build/');
+      cy.get('[data-test=LayoutFooter__link--blog]')
         .invoke('attr', 'target')
         .should('eq', '_blank');
     });
 
-    it('Farcaster link is visible, has correct text and attributes', () => {
-      cy.get('[data-test=LayoutFooter__link--farcaster]').should('be.visible');
-      cy.get('[data-test=LayoutFooter__link--farcaster]')
+    it('Brand assets link is visible, has correct text and attributes', () => {
+      cy.get('[data-test=LayoutFooter__link--brandAssets]').should('be.visible');
+      cy.get('[data-test=LayoutFooter__link--brandAssets]')
         .invoke('text')
-        .should('eq', '→ Farcaster');
-      cy.get('[data-test=LayoutFooter__link--farcaster]')
+        .should('eq', isMobile ? '→ Brand' : '→ Brand assets');
+      cy.get('[data-test=LayoutFooter__link--brandAssets]')
         .invoke('attr', 'href')
-        .should('eq', 'https://warpcast.com/octant');
-      cy.get('[data-test=LayoutFooter__link--farcaster]')
+        .should(
+          'eq',
+          'https://www.figma.com/community/file/1295533951881708349/octant-brand-assets',
+        );
+      cy.get('[data-test=LayoutFooter__link--brandAssets]')
         .invoke('attr', 'target')
         .should('eq', '_blank');
     });
@@ -133,41 +136,32 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) =>
         .should('eq', 'Get PGF news and updates from Octant. No spam, ever');
     });
 
-    if (device === 'desktop' || device === 'large-desktop') {
-      it('Blog of use link is visible, has correct text and attributes', () => {
-        cy.get('[data-test=LayoutFooter__link--blog]').should('be.visible');
-        cy.get('[data-test=LayoutFooter__link--blog]').invoke('text').should('eq', '→ Blog');
-        cy.get('[data-test=LayoutFooter__link--blog]')
-          .invoke('attr', 'href')
-          .should('eq', 'https://blog.octant.build/');
-        cy.get('[data-test=LayoutFooter__link--blog]')
-          .invoke('attr', 'target')
-          .should('eq', '_blank');
-      });
-
-      it('Terms of use link is visible, has correct text and attributes', () => {
-        cy.get('[data-test=LayoutFooter__link--brandAssets]').should('be.visible');
-        cy.get('[data-test=LayoutFooter__link--brandAssets]')
-          .invoke('text')
-          .should('eq', '→ Brand assets');
-        cy.get('[data-test=LayoutFooter__link--brandAssets]')
-          .invoke('attr', 'href')
-          .should(
-            'eq',
-            'https://www.figma.com/community/file/1295533951881708349/octant-brand-assets',
-          );
-        cy.get('[data-test=LayoutFooter__link--brandAssets]')
-          .invoke('attr', 'target')
-          .should('eq', '_blank');
-      });
-    } else {
-      it('Blog of use link doesn`t exist', () => {
-        cy.get('[data-test=LayoutFooter__link--blog]').should('not.exist');
-      });
-
-      it('Terms of use link doesn`t exist', () => {
-        cy.get('[data-test=LayoutFooter__link--brandAssets]').should('not.exist');
-      });
-    }
+    it('X link is visible and has correct attributes', () => {
+      cy.get('[data-test=LayoutFooter__Button--x]').should('be.visible');
+      cy.get('[data-test=LayoutFooter__Button--x]')
+        .invoke('attr', 'href')
+        .should('eq', 'https://x.com/OctantApp');
+      cy.get('[data-test=LayoutFooter__Button--x]').invoke('attr', 'target').should('eq', '_blank');
+    });
+
+    it('Farcaster link is visible and has correct attributes', () => {
+      cy.get('[data-test=LayoutFooter__Button--farcaster]').should('be.visible');
+      cy.get('[data-test=LayoutFooter__Button--farcaster]')
+        .invoke('attr', 'href')
+        .should('eq', 'https://warpcast.com/octant');
+      cy.get('[data-test=LayoutFooter__Button--farcaster]')
+        .invoke('attr', 'target')
+        .should('eq', '_blank');
+    });
+
+    it('Discord link is visible and has correct attributes', () => {
+      cy.get('[data-test=LayoutFooter__Button--discord]').should('be.visible');
+      cy.get('[data-test=LayoutFooter__Button--discord]')
+        .invoke('attr', 'href')
+        .should('eq', 'https://discord.gg/octant');
+      cy.get('[data-test=LayoutFooter__Button--discord]')
+        .invoke('attr', 'target')
+        .should('eq', '_blank');
+    });
   });
 });

client/src/components/shared/Layout/LayoutFooter/LayoutFooter.module.scss

@@ -29,6 +29,7 @@
     }
 
     .info {
+      order: 1;
       width: 100%;
       display: flex;
       text-align: start;
@@ -56,6 +57,7 @@
     }
 
     .links {
+      order: 1;
       grid-template-columns: repeat(3, minmax(11.2rem, auto) [col-start]);
       padding: 3.2rem 0;
       width: 100%;
@@ -66,6 +68,7 @@
       border-bottom: 0.1rem solid $color-octant-grey1;
 
       @media #{$tablet-up} {
+        grid-template-columns: repeat(3, minmax(13.2rem, auto) [col-start]);
         margin: 0;
         border-bottom: none;
         padding: 0;
@@ -94,6 +97,7 @@
 }
 
 .newsletterWrapper {
+  order: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -134,3 +138,26 @@
     }
   }
 }
+.socialMedia {
+  display: flex;
+  gap: 3.2rem;
+  margin-right: auto;
+  padding-top: 4rem;
+  padding-bottom: 1.6rem;
+
+  @media #{$tablet-up} {
+    padding-top: 3.2rem;
+    order: 1;
+  }
+
+  @media #{$desktop-up} {
+    gap: 1.6rem;
+  }
+
+  .socialMediaSvg:hover {
+    circle {
+      fill: $color-octant-dark;
+      transition: all $transition-time-1;
+    }
+  }
+}

client/src/components/shared/Layout/LayoutFooter/LayoutFooter.tsx

@@ -2,6 +2,7 @@ import cx from 'classnames';
 import React, { FC, memo, useLayoutEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import Button from 'components/ui/Button';
 import Svg from 'components/ui/Svg';
 import {
   BLOG_POST,
@@ -12,43 +13,33 @@ import {
   OCTANT_BUILD_LINK,
   OCTANT_DOCS,
   TERMS_OF_USE,
-  // TODO OCT-2097 Bring Twitter link back.
-  // TWITTER_LINK,
   PRIVACY_POLICY,
+  X_LINK,
 } from 'constants/urls';
 import useMediaQuery from 'hooks/helpers/useMediaQuery';
-import { octantSemiTransparent } from 'svg/logo';
+import { discord, farcaster, octantSemiTransparent, X } from 'svg/logo';
 
 import styles from './LayoutFooter.module.scss';
 import LayoutFooterProps from './types';
 
 const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'layout.footer' });
-  const { isDesktop } = useMediaQuery();
+  const { isMobile } = useMediaQuery();
   const newsletterRef = useRef<HTMLDivElement>(null);
   const dataTestRoot = 'LayoutFooter';
 
-  const links = isDesktop
-    ? [
-        { id: 'website', label: t('links.website'), link: OCTANT_BUILD_LINK },
-        { id: 'docs', label: t('links.docs'), link: OCTANT_DOCS },
-        { id: 'blog', label: t('links.blog'), link: BLOG_POST },
-        { id: 'discord', label: t('links.discord'), link: DISCORD_LINK },
-        { id: 'farcaster', label: t('links.farcaster'), link: FARCASTER_LINK },
-        // TODO OCT-2097 Bring Twitter/X back.
-        // { label: t('links.twitterX'), link: TWITTER_LINK },
-        { id: 'brandAssets', label: t('links.brandAssets'), link: BRAND_ASSETS_FIGMA_LINK },
-        { id: 'privacyPolicy', label: t('links.privacyPolicy'), link: PRIVACY_POLICY },
-        { id: 'termsOfUse', label: t('links.termsOfUse'), link: TERMS_OF_USE },
-      ]
-    : [
-        { id: 'website', label: t('links.website'), link: OCTANT_BUILD_LINK },
-        { id: 'docs', label: t('links.docs'), link: OCTANT_DOCS },
-        { id: 'farcaster', label: t('links.farcaster'), link: FARCASTER_LINK },
-        { id: 'discord', label: t('links.discord'), link: DISCORD_LINK },
-        { id: 'privacyPolicy', label: t('links.privacyPolicy'), link: PRIVACY_POLICY },
-        { id: 'termsOfUse', label: t('links.termsOfUse'), link: TERMS_OF_USE },
-      ];
+  const links = [
+    { id: 'website', label: t('links.website'), link: OCTANT_BUILD_LINK },
+    { id: 'docs', label: t('links.docs'), link: OCTANT_DOCS },
+    { id: 'blog', label: t('links.blog'), link: BLOG_POST },
+    {
+      id: 'brandAssets',
+      label: isMobile ? t('links.brand') : t('links.brandAssets'),
+      link: BRAND_ASSETS_FIGMA_LINK,
+    },
+    { id: 'privacyPolicy', label: t('links.privacyPolicy'), link: PRIVACY_POLICY },
+    { id: 'termsOfUse', label: t('links.termsOfUse'), link: TERMS_OF_USE },
+  ];
 
   useLayoutEffect(() => {
     if (!newsletterRef.current || newsletterRef.current.children.length || window.Cypress) {
@@ -113,6 +104,29 @@ const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
           {t('newsletterText')}
         </div>
       </div>
+      <div className={styles.socialMedia}>
+        <Button
+          className={styles.socialMediaSvg}
+          dataTest="LayoutFooter__Button--x"
+          href={X_LINK}
+          Icon={<Svg img={X} size={3.2} />}
+          variant="iconOnly"
+        />
+        <Button
+          className={styles.socialMediaSvg}
+          dataTest="LayoutFooter__Button--farcaster"
+          href={FARCASTER_LINK}
+          Icon={<Svg img={farcaster} size={3.2} />}
+          variant="iconOnly"
+        />
+        <Button
+          className={styles.socialMediaSvg}
+          dataTest="LayoutFooter__Button--discord"
+          href={DISCORD_LINK}
+          Icon={<Svg img={discord} size={3.2} />}
+          variant="iconOnly"
+        />
+      </div>
     </div>
   );
 };

client/src/constants/urls.ts

@@ -5,7 +5,7 @@ export const OCTANT_DOCS = 'https://docs.octant.app/';
 export const DISCORD_LINK = 'https://discord.gg/octant';
 export const BLOG_POST = 'https://blog.octant.build/';
 export const OCTANT_BUILD_LINK = 'https://octant.build/';
-export const TWITTER_LINK = 'https://x.com/OctantApp';
+export const X_LINK = 'https://x.com/OctantApp';
 export const FARCASTER_LINK = 'https://warpcast.com/octant';
 export const TERMS_OF_USE = 'https://docs.octant.app/terms-of-use.html';
 export const GITCOIN_PASSPORT = 'https://support.passport.xyz/passport-knowledge-base';

client/src/hooks/helpers/useOnboardingSteps/steps.tsx

@@ -4,7 +4,7 @@ import { Trans } from 'react-i18next';
 import styles from 'components/shared/ModalOnboarding/ModalOnboarding.module.scss';
 import { Step } from 'components/shared/ModalOnboarding/types';
 import Button from 'components/ui/Button';
-import { DISCORD_LINK, FARCASTER_LINK, OCTANT_BUILD_LINK, TWITTER_LINK } from 'constants/urls';
+import { DISCORD_LINK, FARCASTER_LINK, OCTANT_BUILD_LINK, X_LINK } from 'constants/urls';
 import i18n from 'i18n';
 
 export const getStepsDecisionWindowOpen = (epoch: string, changeAWDate: string): Step[] => [
@@ -90,7 +90,7 @@ export const getStepsDecisionWindowClosed = (epoch: string, changeAWDate: string
         components={[
           <Button className={styles.link} href={OCTANT_BUILD_LINK} variant="link3" />,
           <Button className={styles.link} href={DISCORD_LINK} variant="link3" />,
-          <Button className={styles.link} href={TWITTER_LINK} variant="link3" />,
+          <Button className={styles.link} href={X_LINK} variant="link3" />,
           <Button className={styles.link} href={FARCASTER_LINK} variant="link3" />,
         ]}
         i18nKey="views.onboarding.stepsDecisionWindowClosed.getReady.text"

client/src/locales/en/translation.json

@@ -399,13 +399,11 @@
       "octantText": "Octant is a <0>Golem Foundation</0> project,<br/> launched in 2023.",
       "links": {
         "website": "Website",
-        "discord": "Discord",
         "blog": "Blog",
         "docs": "Docs",
         "brandAssets": "Brand assets",
+        "brand": "Brand",
         "termsOfUse": "Terms of use",
-        "farcaster": "Farcaster",
-        "twitterX": "Twitter/X",
         "privacyPolicy": "Privacy policy"
       }
     }
@@ -586,4 +584,4 @@
       "information": "We're synchronizing things to prepare the<br/>next epoch, so the app will be unavailable<br/>for a little while. Please check back soon."
     }
   }
-}
+}

client/src/svg/logo.ts

@@ -35,3 +35,21 @@ export const ethereum: SvgImageConfig = {
     '<g clip-path="url(#ethereum)"><path fill="#fff" fill-rule="evenodd" d="M20 40C8.954 40 0 31.046 0 20S8.954 0 20 0s20 8.954 20 20-8.954 20-20 20Zm9.992-19.726L20.623 5 11.25 20.275l9.372 5.441 9.37-5.442ZM30 22.02l-9.378 5.439-9.372-5.438 9.372 12.973L30 22.02Z" clip-rule="evenodd"/><path fill="#000" fill-opacity=".298" d="M20.623 5v11.087l9.37 4.188L20.624 5Zm0 22.46v7.534L30 22.02l-9.377 5.44Z"/><path fill="#000" fill-opacity=".801" d="m20.623 25.716 9.37-5.441-9.37-4.185v9.626Z"/><path fill="#000" fill-opacity=".298" d="m11.25 20.275 9.372 5.441V16.09l-9.372 4.185Z"/></g><defs><clipPath id="ethereum"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs>',
   viewBox: '0 0 40 40',
 };
+
+export const X: SvgImageConfig = {
+  markup:
+    '<circle cx="16" cy="16" r="16" fill="#CDD1CD"/><path d="M20.985 8.666h2.658l-5.807 6.637 6.831 9.03H19.32l-4.19-5.476-4.793 5.477h-2.66l6.211-7.099-6.553-8.569h5.485l3.786 5.006 4.38-5.006Zm-.933 14.077h1.473l-9.507-12.57h-1.58l9.614 12.57Z" fill="#fff"/>',
+  viewBox: '0 0 32 32',
+};
+
+export const farcaster: SvgImageConfig = {
+  markup:
+    '<circle cx="16" cy="16" r="16" fill="#CDD1CD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.307 8h11.18v2.256h3.178l-.667 2.256h-.564v9.128c.283 0 .513.23.513.513v.616h.102c.283 0 .513.23.513.513v.615h-5.744v-.615c0-.284.23-.513.513-.513h.103v-.616c0-.248.176-.455.411-.502v-5.036h-.016a3.95 3.95 0 0 0-7.865 0h-.016v5.026h.102c.283 0 .513.23.513.512v.616h.102c.284 0 .513.23.513.513v.615H7.435v-.615c0-.284.23-.513.512-.513h.103v-.616c0-.283.23-.512.513-.512v-9.129h-.564l-.667-2.256h2.975V8Z" fill="#fff"/>',
+  viewBox: '0 0 32 32',
+};
+
+export const discord: SvgImageConfig = {
+  markup:
+    '<circle cx="16" cy="16" r="16" fill="#CDD1CD"/><path d="M22.017 10.423a14.449 14.449 0 0 0-3.576-1.089 9.686 9.686 0 0 0-.458.921 13.46 13.46 0 0 0-3.969 0 9.742 9.742 0 0 0-.458-.921 14.548 14.548 0 0 0-3.579 1.091c-2.263 3.314-2.876 6.545-2.57 9.73a14.476 14.476 0 0 0 4.386 2.179c.356-.473.67-.974.94-1.499a9.374 9.374 0 0 1-1.48-.699c.125-.089.246-.18.363-.27a10.393 10.393 0 0 0 8.77 0c.118.096.239.188.362.27-.473.276-.969.51-1.482.7.27.525.584 1.026.94 1.498a14.408 14.408 0 0 0 4.388-2.177c.36-3.694-.615-6.896-2.577-9.734Zm-8.896 7.773c-.854 0-1.56-.767-1.56-1.712 0-.944.68-1.719 1.558-1.719.876 0 1.577.775 1.562 1.72-.015.944-.689 1.711-1.56 1.711Zm5.759 0c-.856 0-1.56-.767-1.56-1.712 0-.944.682-1.719 1.56-1.719s1.573.775 1.558 1.72c-.015.944-.687 1.711-1.558 1.711Z" fill="#fff"/>',
+  viewBox: '0 0 32 32',
+};