Merge branch 'master' into test/oct-2126-e2e-projects

golemfoundation · Jan 13, 2025 · 7ce4b4c · 7ce4b4c
2 parents 7dcc575 + 5f6bed4
commit 7ce4b4c
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 37 deletions.
diff --git a/client/cypress/utils/onboarding.ts b/client/cypress/utils/onboarding.ts
@@ -77,7 +77,7 @@ export const checkChangeStepsWithArrowKeys = (isTOSAccepted: boolean): void => {
 
 export const checkChangeStepsByClickingEdgeOfTheScreenUpTo25px = (
   isTOSAccepted: boolean,
-  isMobile = false,
+  isMobileOrTablet = false,
 ): void => {
   checkCurrentElement(0, true);
 
@@ -93,7 +93,7 @@ export const checkChangeStepsByClickingEdgeOfTheScreenUpTo25px = (
       { clientX: leftEdgeX, el: 0 },
     ].forEach(({ clientX, el }) => {
       cy.get('[data-test=ModalOnboarding]').click(clientX, element.height()! / 2, {
-        force: isMobile,
+        force: isMobileOrTablet,
       });
       checkCurrentElement(el, isTOSAccepted || el === 0);
 
@@ -106,7 +106,7 @@ export const checkChangeStepsByClickingEdgeOfTheScreenUpTo25px = (
 
 export const checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px = (
   isTOSAccepted: boolean,
-  isMobile = false,
+  isMobileOrTablet = false,
 ): void => {
   checkCurrentElement(0, true);
 
@@ -121,7 +121,7 @@ export const checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px = (
       { clientX: leftEdgeX + 25, el: 0 },
     ].forEach(({ clientX, el }) => {
       cy.get('[data-test=ModalOnboarding]').click(clientX, element.height()! / 2, {
-        force: isMobile,
+        force: isMobileOrTablet,
       });
       checkCurrentElement(el, isTOSAccepted || el === 0);
 

diff --git a/client/src/components/shared/Layout/LayoutFooter/LayoutFooter.module.scss b/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;
@@ -107,6 +110,7 @@
 }
 
 .newsletterWrapper {
+  order: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -147,3 +151,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;
+    }
+  }
+}
diff --git a/client/src/components/shared/Layout/LayoutFooter/LayoutFooter.tsx b/client/src/components/shared/Layout/LayoutFooter/LayoutFooter.tsx
@@ -3,6 +3,7 @@ import React, { FC, memo, useLayoutEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import LanguageSelectorWrapped from 'components/shared/Layout/LanguageSelectorWrapped';
+import Button from 'components/ui/Button';
 import Svg from 'components/ui/Svg';
 import {
   BLOG_POST,
@@ -13,43 +14,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, isMobile } = 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) {
@@ -118,6 +109,29 @@ const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
         </div>
         {!isMobile && <LanguageSelectorWrapped />}
       </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>
   );
 };

diff --git a/client/src/constants/karmaGap.ts b/client/src/constants/karmaGap.ts
@@ -6,6 +6,7 @@ export const PROGRAMS_IDS_TO_EPOCH_NUMBER_MAPPING = {
   3: '546',
   4: '547',
   5: '548',
+  6: '773',
 };
 /* eslint-enable @typescript-eslint/naming-convention */
 

diff --git a/client/src/constants/urls.ts b/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';

diff --git a/client/src/hooks/helpers/useOnboardingSteps/steps.tsx b/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"

diff --git a/client/src/hooks/queries/karmaGap/useMilestonesPerGrantPerProgram.ts b/client/src/hooks/queries/karmaGap/useMilestonesPerGrantPerProgram.ts
@@ -28,7 +28,7 @@ export default function useMilestonesPerGrantPerProgram(
       return response.data.find(
         element =>
           element.external?.octant
-            ?.map(octant => octant.toLowerCase())
+            ?.map(address => address.toLowerCase())
             .includes(projectAddressToLowerCase) ||
           element.project.recipient.toLowerCase() === projectAddressToLowerCase ||
           element.project.details.recipient.toLowerCase() === projectAddressToLowerCase,

diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
@@ -398,13 +398,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"
       }
     }
@@ -596,4 +594,4 @@
     "english": "English",
     "spanish": "Español"
   }
-}
+}
diff --git a/client/src/svg/logo.ts b/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',
+};