Merge pull request #823 from haqq-network/dev

release
haqq-network · May 13, 2024 · 5f6f020 · 5f6f020
2 parents 6b867b0 + 8e0d228
commit 5f6f020
Show file tree

Hide file tree

Showing 54 changed files with 1,953 additions and 1,708 deletions.
diff --git a/.yarn/releases/yarn-4.2.1.cjs → .yarn/releases/yarn-4.2.2.cjs b/.yarn/releases/yarn-4.2.1.cjs → .yarn/releases/yarn-4.2.2.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -15,4 +15,4 @@ npmScopes:
 
 tsEnableAutoTypes: true
 
-yarnPath: .yarn/releases/yarn-4.2.1.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs
diff --git a/apps/haqq-website/app/(main)/blog/[slug]/page.tsx b/apps/haqq-website/app/(main)/blog/[slug]/page.tsx
@@ -8,19 +8,8 @@ import {
 } from '../../../../utils/get-blog-posts';
 
 export const dynamicParams = true;
-
 export const revalidate = REVALIDATE_TIME;
 
-export async function generateStaticParams() {
-  const { posts } = await getHaqqBlogPostsFromFalconer();
-
-  return posts.map((post) => {
-    return {
-      slug: post.slug,
-    };
-  });
-}
-
 export async function generateMetadata(
   params: { params: { slug: string } },
   parent: ResolvingMetadata,

diff --git a/apps/haqq-website/components/burger-menu/burger-menu.tsx b/apps/haqq-website/components/burger-menu/burger-menu.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import clsx from 'clsx';
+import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { SubscribeForm } from '@haqq/haqq-website/forms';
 import {
   DiscordIcon,
   GithubIcon,
@@ -15,13 +15,24 @@ import {
   Button,
 } from '@haqq/haqq-website-ui-kit';
 
+const SubscribeForm = dynamic(
+  async () => {
+    const { SubscribeForm } = await import('@haqq/haqq-website/forms');
+    return { default: SubscribeForm };
+  },
+  {
+    ssr: false,
+  },
+);
+
 interface NavLinkProps {
   href: string;
   isOutLink?: boolean;
   onClick?: () => void;
 }
 
 type SocialLinkProps = Pick<NavLinkProps, 'href'> & {
+  id: string;
   icon: ReactNode;
 };
 
@@ -50,6 +61,7 @@ function BurgerMenuNavLink({
 }
 
 function BurgerMenuSocialLink({
+  id,
   href,
   children,
   icon,
@@ -60,9 +72,10 @@ function BurgerMenuSocialLink({
       target="_blank"
       rel="noopener noreferrer"
       className="group inline-flex flex-initial flex-row items-center space-x-2 text-[12px] leading-[20px] text-white/50 transition-colors duration-100 hover:text-white sm:text-[13px] sm:leading-[24px] lg:text-[16px] lg:leading-[26px]"
+      data-attr={`community-${id}`}
     >
-      <div>{icon}</div>
-      <div>{children}</div>
+      <span>{icon}</span>
+      <span>{children}</span>
       <LinkArrowIcon className="mb-[-3px]" />
     </Link>
   );
@@ -132,8 +145,9 @@ export function BurgerMenu({
       </div>
 
       <div className="mb-[60px] grid grid-cols-2 gap-[14px] sm:mb-[80px] sm:gap-[18px]">
-        <div>
+        <div className="leading-[0]">
           <BurgerMenuSocialLink
+            id="discord"
             href="https://discord.gg/islamiccoin"
             icon={
               <DiscordIcon className="mt-[-2px] h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />
@@ -142,8 +156,9 @@ export function BurgerMenu({
             Discord
           </BurgerMenuSocialLink>
         </div>
-        <div>
+        <div className="leading-[0]">
           <BurgerMenuSocialLink
+            id="github"
             href="https://github.com/haqq-network"
             icon={
               <GithubIcon className="mt-[-2px] h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />
@@ -152,8 +167,9 @@ export function BurgerMenu({
             Github
           </BurgerMenuSocialLink>
         </div>
-        <div>
+        <div className="leading-[0]">
           <BurgerMenuSocialLink
+            id="twitter"
             href="https://twitter.com/The_HaqqNetwork"
             icon={
               <TwitterIcon className="mt-[-2px] h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />
@@ -162,8 +178,9 @@ export function BurgerMenu({
             Twitter
           </BurgerMenuSocialLink>
         </div>
-        <div>
+        <div className="leading-[0]">
           <BurgerMenuSocialLink
+            id="telegram"
             href="https://t.me/islamiccoin_int"
             icon={
               <TelegramIcon className="mt-[-2px] h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />

diff --git a/apps/haqq-website/components/footer/footer.tsx b/apps/haqq-website/components/footer/footer.tsx
@@ -1,10 +1,10 @@
 'use client';
 import { ReactNode } from 'react';
 import clsx from 'clsx';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useMediaQuery } from 'react-responsive';
-import { SubscribeForm } from '@haqq/haqq-website/forms';
 import {
   DiscordIcon,
   GithubIcon,
@@ -15,6 +15,11 @@ import {
 } from '@haqq/haqq-website-ui-kit';
 import logoImageData from '../../assets/images/logo.svg';
 
+const SubscribeForm = dynamic(async () => {
+  const { SubscribeForm } = await import('@haqq/haqq-website/forms');
+  return { default: SubscribeForm };
+});
+
 function FooterNavLink({
   href,
   children,
@@ -45,17 +50,20 @@ function FooterNavSocialLink({
   href,
   children,
   icon,
+  id,
 }: {
   href: string;
   children: ReactNode;
   icon: ReactNode;
+  id: string;
 }) {
   return (
     <Link
       href={href}
       target="_blank"
       rel="noopener noreferrer"
       className="group inline-flex flex-initial flex-row items-center text-[12px] leading-[20px] text-white/50 transition-colors duration-100 hover:text-white sm:text-[13px] sm:leading-[24px] lg:text-[16px] lg:leading-[26px]"
+      data-attr={`community-${id}`}
     >
       <div>{icon}</div>
       <div className="ml-[12px]">{children}</div>
@@ -133,6 +141,7 @@ export function Footer({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
             <nav className="grid grid-cols-1 gap-[8px] sm:grid-cols-2 sm:gap-[12px] lg:grid-cols-1">
               <div className="leading-[0]">
                 <FooterNavSocialLink
+                  id="discord"
                   href="https://discord.gg/CDtXuQG3Vd"
                   icon={
                     <DiscordIcon className=" h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />
@@ -143,6 +152,7 @@ export function Footer({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
               </div>
               <div className="leading-[0]">
                 <FooterNavSocialLink
+                  id="github"
                   href="https://github.com/haqq-network"
                   icon={
                     <GithubIcon className=" h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />
@@ -153,6 +163,7 @@ export function Footer({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
               </div>
               <div className="leading-[0]">
                 <FooterNavSocialLink
+                  id="twitter"
                   href="https://twitter.com/The_HaqqNetwork"
                   icon={
                     <TwitterIcon className=" h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />
@@ -163,6 +174,7 @@ export function Footer({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
               </div>
               <div className="leading-[0]">
                 <FooterNavSocialLink
+                  id="telegram"
                   href="https://t.me/islamiccoin_int"
                   icon={
                     <TelegramIcon className=" h-[20px] w-[20px] sm:h-[24px] sm:w-[24px] lg:h-[26px] lg:w-[26px]" />

diff --git a/apps/haqq-website/components/header/header.tsx b/apps/haqq-website/components/header/header.tsx
@@ -1,9 +1,9 @@
 'use client';
-import { Fragment, ReactNode, useCallback, useState } from 'react';
+import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
-import ScrollLock from 'react-scrolllock';
+import { useScrollLock } from 'usehooks-ts';
 import { Button, BurgerButton } from '@haqq/haqq-website-ui-kit';
 import logoImageData from '../../assets/images/logo.svg';
 import { BurgerMenu } from '../burger-menu/burger-menu';
@@ -36,6 +36,7 @@ function HeaderNavLink({
 
 export function Header({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
   const [isBurgerMenuOpen, setBurgerMenuOpen] = useState(false);
+  const { lock, unlock } = useScrollLock();
 
   const handleMenuOpen = useCallback(() => {
     setBurgerMenuOpen(!isBurgerMenuOpen);
@@ -45,6 +46,18 @@ export function Header({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
     setBurgerMenuOpen(false);
   }, []);
 
+  useEffect(() => {
+    if (isBurgerMenuOpen) {
+      lock();
+    } else {
+      unlock();
+    }
+
+    return () => {
+      unlock();
+    };
+  }, [isBurgerMenuOpen, lock, unlock]);
+
   return (
     <Fragment>
       <header
@@ -223,8 +236,6 @@ function BurgerMenuComponent({
 }) {
   return (
     <div className="lg:hidden">
-      <ScrollLock isActive={isOpen} />
-
       <div
         className={clsx(
           'fixed right-0 top-[62px] z-[45] h-[calc(100vh-62px)] w-full sm:top-[72px] sm:h-[calc(100vh-72px)] sm:w-[468px]',
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,4 @@ npmScopes:

		tsEnableAutoTypes: true

		yarnPath: .yarn/releases/yarn-4.2.1.cjs
		yarnPath: .yarn/releases/yarn-4.2.2.cjs