Merge branch 'dev' into shadcn-get-eth

Author: pettinarip

src/components/Banners/BannerNotification.tsx

@@ -1,40 +1,26 @@
-import React from "react"
-import { Center, FlexProps, useMediaQuery } from "@chakra-ui/react"
+import { cn } from "@/lib/utils/cn"
 
-import { lightTheme as oldTheme } from "../../theme"
-
-export type BannerNotificationProps = FlexProps & {
+export type BannerNotificationProps = React.HTMLAttributes<HTMLDivElement> & {
   shouldShow?: boolean
 }
 
 const BannerNotification = ({
   children,
-  shouldShow = false,
+  shouldShow,
+  className,
   ...props
 }: BannerNotificationProps) => {
-  const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
+  if (!shouldShow) return <></>
   return (
-    <>
-      {shouldShow && (
-        <Center
-          as="aside"
-          maxW={isLGScreen ? oldTheme.variables.maxPageWidth : "100%"}
-          w="100%"
-          py="4"
-          px="8"
-          bg="primary.base"
-          color="background.base"
-          sx={{
-            a: {
-              color: "background.base",
-            },
-          }}
-          {...props}
-        >
-          {children}
-        </Center>
+    <aside
+      className={cn(
+        "flex items-center justify-center gap-2 bg-primary-action px-8 py-4 text-white [&_a]:text-white [&_a]:hover:text-white/80",
+        className
       )}
-    </>
+      {...props}
+    >
+      {children}
+    </aside>
   )
 }
 

src/components/Banners/DismissableBanner/index.tsx

@@ -1,19 +1,21 @@
-// Libraries
-import React, { useEffect, useState } from "react"
-import { Center, CloseButton } from "@chakra-ui/react"
+import { useEffect, useState } from "react"
+import { MdClose } from "react-icons/md"
+
+import { Button } from "@/components/ui/buttons/Button"
+import { Center } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
-// Components
 import BannerNotification from "../BannerNotification"
 
-// Interface
-export type DismissableBannerProps = {
-  children: JSX.Element
+type DismissableBannerProps = React.HTMLAttributes<HTMLDivElement> & {
   storageKey: string
 }
 
 const DismissableBanner = ({
   children,
   storageKey,
+  className,
 }: DismissableBannerProps) => {
   const [show, setShow] = useState<boolean>(false)
 
@@ -28,13 +30,16 @@ const DismissableBanner = ({
   }
 
   return (
-    <BannerNotification shouldShow={show} gap="8">
-      <Center marginInlineStart="auto">{children}</Center>
-      <CloseButton
-        marginInlineStart="auto"
+    <BannerNotification shouldShow={show} className={cn("gap-8", className)}>
+      <Center className="ms-auto">{children}</Center>
+      <Button
+        className="ms-auto"
         onClick={onClose}
         aria-label="Close Banner"
-      />
+        variant="ghost"
+      >
+        <MdClose />
+      </Button>
     </BannerNotification>
   )
 }

src/components/Homepage/useHome.ts

@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6"
 
-import type { EventCardProps, Lang } from "@/lib/types"
+import type { EventCardProps } from "@/lib/types"
 import type { CodeExample } from "@/lib/interfaces"
 
 import { useBentoBox } from "@/components/Homepage/useBentoBox"
@@ -16,8 +16,8 @@ import TryAppsIcon from "@/components/icons/phone-homescreen.svg"
 import RoadmapSign from "@/components/icons/roadmap-sign.svg"
 import Whitepaper from "@/components/icons/whitepaper.svg"
 
+import { cn } from "@/lib/utils/cn"
 import { isValidDate } from "@/lib/utils/date"
-import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import events from "@/data/community-events.json"
 import CreateWalletContent from "@/data/CreateWallet"
@@ -27,6 +27,7 @@ import { GITHUB_REPO_URL } from "@/lib/constants"
 import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
 import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
 import SimpleWalletContent from "!!raw-loader!@/data/SimpleWallet.sol"
+import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export const useHome = () => {
   const { t } = useTranslation(["common", "page-index"])
@@ -37,7 +38,7 @@ export const useHome = () => {
 
   const bentoItems = useBentoBox()
 
-  const dir = isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"
+  const { direction, isRtl } = useRtlFlip()
 
   const toggleCodeExample = (id: number): void => {
     setActiveCode(id)
@@ -106,7 +107,10 @@ export const useHome = () => {
       description: t("page-index:page-index-cta-dapps-description"),
       href: "/dapps/",
       Svg: TryAppsIcon,
-      className: "text-accent-c hover:text-accent-c-hover",
+      className: cn(
+        "text-accent-c hover:text-accent-c-hover",
+        isRtl && "[&_svg]:-scale-x-100"
+      ),
     },
   ]
 
@@ -129,11 +133,13 @@ export const useHome = () => {
     {
       label: t("page-index:page-index-popular-topics-whitepaper"),
       Svg: Whitepaper,
+      className: cn(isRtl && "[&_svg]:-scale-x-100"),
       href: "/whitepaper/",
     },
     {
       label: t("page-index:page-index-popular-topics-roadmap"),
       Svg: RoadmapSign,
+      className: cn(isRtl && "[&_svg]:-scale-x-100"),
       href: "/roadmap/",
     },
   ]
@@ -188,7 +194,7 @@ export const useHome = () => {
     t,
     locale,
     asPath,
-    dir,
+    dir: direction,
     isModalOpen,
     setModalOpen,
     activeCode,

src/components/ui/Link.tsx

@@ -50,7 +50,7 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   ref
 ) {
   const { asPath } = useRouter()
-  const { flipForRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
 
   if (!href) {
     console.warn("Link component is missing href prop")
@@ -102,9 +102,10 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         <VisuallyHidden>(opens in a new tab)</VisuallyHidden>
         {!hideArrow && (
           <RxExternalLink
-            className={cn("-me-1 inline h-6 w-6 p-1 align-middle", {
-              transform: flipForRtl,
-            })}
+            className={cn(
+              "-me-1 inline h-6 w-6 p-1 align-middle",
+              twFlipForRtl
+            )}
           />
         )}
       </a>

src/layouts/UseCases.tsx

@@ -177,7 +177,7 @@ export const UseCasesLayout = ({
       width="full"
       dir={contentNotTranslated ? "ltr" : "unset"}
     >
-      <BannerNotification shouldShow zIndex="sticky" hideBelow={lgBp}>
+      <BannerNotification shouldShow className="z-sticky max-lg:hidden">
         <Emoji text=":pencil:" className="me-4 shrink-0 text-2xl" />
         <Text m={0}>
           {t("template-usecase:template-usecase-banner")}{" "}

src/pages/index.tsx

@@ -313,12 +313,15 @@ const HomePage = ({
                   {t("page-index:page-index-popular-topics-header")}
                 </h3>
                 <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
-                  {popularTopics.map(({ label, Svg, href }) => (
+                  {popularTopics.map(({ label, Svg, href, className }) => (
                     <SvgButtonLink
                       key={label}
                       Svg={Svg}
                       href={href}
-                      className="text-accent-b hover:text-accent-b-hover [&>:first-child]:flex-row"
+                      className={cn(
+                        "text-accent-b hover:text-accent-b-hover [&>:first-child]:flex-row",
+                        className
+                      )}
                     >
                       <p className="text-start text-xl font-bold text-body group-hover:underline">
                         {label}