Merge branch 'dev' into gradients

Author: wackerow

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/EnergyConsumptionChart/index.tsx

@@ -12,7 +12,6 @@ import ChartDataLabels from "chartjs-plugin-datalabels"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Bar } from "react-chartjs-2"
-import { useBreakpointValue } from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
@@ -21,6 +20,7 @@ import { Center } from "@/components/ui/flex"
 import { wrapLabel } from "@/lib/utils/charts"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import useColorModeValue from "@/hooks/useColorModeValue"
 import { useIsClient } from "@/hooks/useIsClient"
 

src/components/ExpandableInfo.tsx

@@ -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/Homepage/useHome.ts

@@ -1,16 +1,12 @@
 import React from "react"
-import {
-  Box,
-  Flex,
-  type FlexProps,
-  Text,
-  useBreakpointValue,
-} from "@chakra-ui/react"
+import { Box, Flex, type FlexProps, Text } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 
 import type { NFT } from "./interfaces"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 type NFTListProps = FlexProps & {
   nfts: Array<NFT>
 }

src/components/Simulator/WalletHome/NFTList.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/components/ui/Link.tsx

@@ -9,7 +9,7 @@ import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 import { BaseLink, type LinkProps } from "../Link"
 
 const buttonVariants = cva(
-  "pointer inline-flex gap-2 items-center justify-center rounded border border-solid border-current text-primary transition focus-visible:outline focus-visible:outline-4 focus-visible:outline-primary-hover focus-visible:-outline-offset-1 disabled:text-disabled disabled:pointer-events-none hover:text-primary-hover [&[data-secondary='true']]:text-body [&>svg]:flex-shrink-0",
+  "inline-flex gap-2 items-center justify-center rounded border border-solid border-current text-primary transition focus-visible:outline focus-visible:outline-4 focus-visible:outline-primary-hover focus-visible:-outline-offset-1 disabled:text-disabled disabled:pointer-events-none hover:text-primary-hover [&[data-secondary='true']]:text-body [&>svg]:flex-shrink-0",
   {
     variants: {
       variant: {