From 265d9d24998bad0134a4092dd106d4698081058b Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 18 Sep 2024 12:27:00 -0700 Subject: [PATCH 1/6] refactor: simplify Swiper prop hanling --- src/components/Swiper/index.tsx | 30 ++++++++++++++++++------------ src/pages/index.tsx | 26 ++++++++++++-------------- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/components/Swiper/index.tsx b/src/components/Swiper/index.tsx index d235a381a03..26344808770 100644 --- a/src/components/Swiper/index.tsx +++ b/src/components/Swiper/index.tsx @@ -1,7 +1,10 @@ import { useTranslation } from "next-i18next" import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules" -import { Swiper as SwiperParent, SwiperSlide } from "swiper/react" -import type { SwiperOptions } from "swiper/types" +import { + Swiper as SwiperParent, + type SwiperProps as SwiperParentProps, + SwiperSlide, +} from "swiper/react" import { ChevronNext, ChevronPrev } from "@/components/Chevron" @@ -12,23 +15,27 @@ import "swiper/css/navigation" import "swiper/css/pagination" import "swiper/css/effect-cards" -type SwiperProps = { +type SwiperProps = SwiperParentProps & { children: React.ReactNode[] - options?: SwiperOptions - className?: string - swiperClass?: string + /** + * Additional class names for the container element. + */ + containerClassName?: string + /** + * Additional class names for the slider element. + */ sliderClass?: string } + const Swiper = ({ children, - className, - swiperClass, + containerClassName, sliderClass, - options, + ...props }: SwiperProps) => { const { t } = useTranslation("common") return ( -
+
{children.map((child, index) => ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 594c1293646..c90e40c62d5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -251,8 +251,8 @@ const HomePage = ({ {/* Mobile */} {t("page-index:page-index-posts-subtitle")}

From 2a0fbfe950232cf29348a8f9d8b8f4fe13e452ce Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 18 Sep 2024 12:27:42 -0700 Subject: [PATCH 2/6] feat: convert Slider usage to Swiper --- src/pages/what-is-ethereum.tsx | 108 ++++++++++++++++++--------------- 1 file changed, 60 insertions(+), 48 deletions(-) diff --git a/src/pages/what-is-ethereum.tsx b/src/pages/what-is-ethereum.tsx index c7ff7b89dfe..daa79134410 100644 --- a/src/pages/what-is-ethereum.tsx +++ b/src/pages/what-is-ethereum.tsx @@ -29,8 +29,8 @@ import { TwImage } from "@/components/Image" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget" -import Slider, { EmblaSlide } from "@/components/Slider" import StatErrorMessage from "@/components/StatErrorMessage" +import Swiper from "@/components/Swiper" import Tabs from "@/components/Tabs" import Tooltip from "@/components/Tooltip" import Translation from "@/components/Translation" @@ -114,8 +114,11 @@ const Section = ({ className, ...rest }: HTMLAttributes) => (
) -export const Width60 = (props: ChildOnlyProp) => ( -
+export const Width60 = ({ + className, + children, +}: React.HTMLAttributes) => ( +
{children}
) export const Width40 = (props: ChildOnlyProp) => ( @@ -164,6 +167,12 @@ const Image400 = ({ src }: Pick) => ( ) +const Slide = ({ children }: ChildOnlyProp) => ( +
+ {children} +
+) + const cachedFetchTxCount = runOnlyOnce(fetchGrowThePie) type Props = BasePageProps & { @@ -393,57 +402,60 @@ const WhatIsEthereumPage = ({
- +

{t("page-what-is-ethereum-why-would-i-use-ethereum-title")}

- +

{t("page-what-is-ethereum-why-would-i-use-ethereum-1")}

{t("page-what-is-ethereum-why-would-i-use-ethereum-2")}

- { - trackCustomEvent({ - eventCategory: `What is Ethereum - Slider`, - eventAction: `Clicked`, - eventName: slides[index].eventName, - }) - }} - > - -

{t("page-what-is-ethereum-slide-1-title")}

- -

- -

-

{t("page-what-is-ethereum-slide-1-desc-2")}

- - - -

{t("page-what-is-ethereum-slide-2-title")}

- -

{t("page-what-is-ethereum-slide-2-desc-1")}

-

- -

- - - -

{t("page-what-is-ethereum-slide-3-title")}

- -

- -

- - - -

{t("page-what-is-ethereum-slide-4-title")}

- -

{t("page-what-is-ethereum-slide-4-desc-1")}

-

{t("page-what-is-ethereum-slide-4-desc-2")}

- - - +
+ { + trackCustomEvent({ + eventCategory: `What is Ethereum - Slider`, + eventAction: `Clicked`, + eventName: slides[activeIndex].eventName, + }) + }} + > + +

{t("page-what-is-ethereum-slide-1-title")}

+ +

+ +

+

{t("page-what-is-ethereum-slide-1-desc-2")}

+ + + +

{t("page-what-is-ethereum-slide-2-title")}

+ +

{t("page-what-is-ethereum-slide-2-desc-1")}

+

+ +

+ + + +

{t("page-what-is-ethereum-slide-3-title")}

+ +

+ +

+ + + +

{t("page-what-is-ethereum-slide-4-title")}

+ +

{t("page-what-is-ethereum-slide-4-desc-1")}

+

{t("page-what-is-ethereum-slide-4-desc-2")}

+ + + +
From 2ec2a0478f4da340c81dd964a1d937063faffa26 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 18 Sep 2024 12:28:42 -0700 Subject: [PATCH 3/6] chore: deprecate unused Slider component in lieu of local SwiperJS-based component --- src/components/Slider/Slider.stories.tsx | 109 ---------------- src/components/Slider/index.tsx | 151 ----------------------- 2 files changed, 260 deletions(-) delete mode 100644 src/components/Slider/Slider.stories.tsx delete mode 100644 src/components/Slider/index.tsx diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx deleted file mode 100644 index e140ef6a12e..00000000000 --- a/src/components/Slider/Slider.stories.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React from "react" -import { - Heading, - HeadingProps, - Stack, - StackProps, - Text, -} from "@chakra-ui/react" -import { Meta, StoryObj } from "@storybook/react" - -import SliderComponent, { EmblaSlide } from "." - -const meta = { - title: "Slider", - component: SliderComponent, - parameters: { - // https://storybook.js.org/docs/react/essentials/actions#action-event-handlers - actions: { - handles: ["click"], - }, - }, -} satisfies Meta - -export default meta - -const H3 = (props: HeadingProps) => - -const Description = (props: StackProps) => - -const ComponentSlides = () => ( - <> - -

Cheaper and Faster Crossborder Payments

- - - Stable coins are a novel type of cryptocurrency that relies on - a more stable asset as the basis for its value. Most of them are - linked to the United States dollar and therefore maintain the value of - that currency. These allow for a very cheap and stable global payment - system. Many current stablecoins are built on the Ethereum network. - - - Ethereum and stablecoins simplify the process of sending money - overseas. It often takes only few minutes to move funds across the - globe, as opposed to the several business days or even weeks that it - may take your average bank, and for a fraction of the price. - Additionally, there is no extra fee for making a high value - transaction, and there are zero restrictions on where or why you are - sending your money. - - - - -

The Quickest Help in Times of Crisis

- - - If you are lucky enough to have multiple banking options through - trusted institutions where you live, you may take for granted the - financial freedom, security and stability that they offer. But for - many people around the world facing political repression or economic - hardship, financial institutions may not provide the protection or - services they need. - - - When war, economic catastrophes or crackdowns on civil liberties - struck the residents of{" "} - - Venezuela - - ,{" "} - - Cuba - - ,{" "} - - Afghanistan - - ,{" "} - - Nigeria - - ,{" "} - - Belarus - - , and{" "} - - Ukraine - - , cryptocurrencies constituted the quickest and often the only option - to retain financial agency. - - 1 - {" "} - As seen in these examples, cryptocurrencies like Ethereum can provide - unfettered access to the global economy when people are cut off from - the outside world. Additionally, stablecoins offer a store of value - when local currencies are collapsing due to superinflation. - - - - -) - -export const Slider: StoryObj = { - args: { - children: , - }, -} diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx deleted file mode 100644 index ace3afd81a9..00000000000 --- a/src/components/Slider/index.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React, { useCallback, useEffect, useState } from "react" -import useEmblaCarousel from "embla-carousel-react" -import { MdChevronLeft, MdChevronRight } from "react-icons/md" -import { Box, Center, Flex, IconButton, Stack } from "@chakra-ui/react" - -import { ChildOnlyProp } from "@/lib/types" - -import { useRtlFlip } from "@/hooks/useRtlFlip" - -export type SliderProps = { - children?: React.ReactNode - onSlideChange?: (slideIndex: number) => void -} - -const Slider = ({ children, onSlideChange }: SliderProps) => { - const { flipForRtl, direction } = useRtlFlip() - const [emblaRef, embla] = useEmblaCarousel({ direction }) - const [prevBtnEnabled, setPrevBtnEnabled] = useState(false) - const [nextBtnEnabled, setNextBtnEnabled] = useState(false) - const [selectedIndex, setSelectedIndex] = useState(0) - const [scrollSnaps, setScrollSnaps] = useState>([]) - - const scrollPrev = useCallback(() => embla && embla.scrollPrev(), [embla]) - const scrollNext = useCallback(() => embla && embla.scrollNext(), [embla]) - const scrollTo = useCallback( - (index: number) => { - if (embla) { - embla.scrollTo(index) - } - - if (onSlideChange) { - onSlideChange(index) - } - }, - [embla, onSlideChange] - ) - - const onSelect = useCallback(() => { - if (!embla) return - setSelectedIndex(embla.selectedScrollSnap()) - setPrevBtnEnabled(embla.canScrollPrev()) - setNextBtnEnabled(embla.canScrollNext()) - }, [embla, setSelectedIndex]) - - useEffect(() => { - if (!embla) return - onSelect() - setScrollSnaps(embla.scrollSnapList()) - embla.on("select", () => { - const index = embla.selectedScrollSnap() - if (onSlideChange) { - onSlideChange(index) - } - onSelect() - }) - }, [embla, setScrollSnaps, onSelect, onSlideChange]) - - return ( - - - {children} - - - } - isRound - me="0.8rem" - _hover={{ boxShadow: "none" }} - _focus={{ boxShadow: "none" }} - bg={prevBtnEnabled ? "sliderBtnBg" : "sliderBtnBgDisabled"} - size="sm" - color={prevBtnEnabled ? "sliderBtnColor" : "sliderBtnColorDisabled"} - transform={flipForRtl} - /> - } - isRound - _hover={{ boxShadow: "none" }} - _focus={{ boxShadow: "none" }} - bg={nextBtnEnabled ? "sliderBtnBg" : "sliderBtnBgDisabled"} - size="sm" - color={nextBtnEnabled ? "sliderBtnColor" : "sliderBtnColorDisabled"} - transform={flipForRtl} - /> - -
- {scrollSnaps.map((_, index) => ( - scrollTo(index)} - sx={{ - me: "1rem", - "&:last-child": { - me: 0, - }, - }} - /> - ))} -
- - ) -} - -export const EmblaSlide = ({ children }: ChildOnlyProp) => { - return ( - - {children} - - ) -} - -export default Slider From ce47138780e2da9491b20477f7121f37ae91d2cd Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 18 Sep 2024 12:33:30 -0700 Subject: [PATCH 4/6] chore(dep): yarn remove embla-carousel-react --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index dba17923e31..251b03de0f7 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,6 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", - "embla-carousel-react": "^7.0.0", "ethereum-blockies-base64": "^1.0.2", "framer-motion": "^10.13.0", "gray-matter": "^4.0.3", From 5b310cf6816eb392ff90bf2c09110c10d02bae18 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 18 Sep 2024 15:41:07 -0700 Subject: [PATCH 5/6] build: yarn update --- yarn.lock | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/yarn.lock b/yarn.lock index b45d34f296c..68cac5a2196 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8053,18 +8053,6 @@ elliptic@^6.5.3, elliptic@^6.5.5: minimalistic-assert "^1.0.1" minimalistic-crypto-utils "^1.0.1" -embla-carousel-react@^7.0.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-7.1.0.tgz#e716f4df7fd31f7ca3e59a3e011158167bc3c468" - integrity sha512-tbYRPRZSDNd2QLNqYDcArAakGIxtUbhS7tkP0dGXktXHGgcX+3ji3VrOUTOftBiujZrMV8kRxtrRUe/1soloIQ== - dependencies: - embla-carousel "7.1.0" - -embla-carousel@7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-7.1.0.tgz#c770dd3ade9285a97f5e3b6bbf705bc35ec0f9b5" - integrity sha512-Bh8Pa8NWzgugLkf8sAGexQlBCNDFaej5BXiKgQdRJ1mUC9NWBrw9Z23YVPVGkguWoz5LMjZXXFVGCobl3UPt/Q== - emoji-regex@^10.3.0: version "10.3.0" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23" @@ -12187,7 +12175,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -"prettier-fallback@npm:prettier@^3": +"prettier-fallback@npm:prettier@^3", prettier@^3.1.1: version "3.3.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== @@ -12202,11 +12190,6 @@ prettier@^2.0.5, prettier@^2.8.8: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== -prettier@^3.1.1: - version "3.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" - integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== - prettier@^3.3.3: version "3.3.3" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105" From e480d23321d9f848902c10ffe4a47fcfe2379d10 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 18 Sep 2024 15:41:11 -0700 Subject: [PATCH 6/6] fix: bg color and nav/pagination island contrast --- src/pages/what-is-ethereum.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/pages/what-is-ethereum.tsx b/src/pages/what-is-ethereum.tsx index daa79134410..fa57e31e40a 100644 --- a/src/pages/what-is-ethereum.tsx +++ b/src/pages/what-is-ethereum.tsx @@ -168,9 +168,7 @@ const Image400 = ({ src }: Pick) => ( ) const Slide = ({ children }: ChildOnlyProp) => ( -
- {children} -
+
{children}
) const cachedFetchTxCount = runOnlyOnce(fetchGrowThePie) @@ -412,7 +410,7 @@ const WhatIsEthereumPage = ({
{ trackCustomEvent({ eventCategory: `What is Ethereum - Slider`, @@ -423,36 +421,36 @@ const WhatIsEthereumPage = ({ >

{t("page-what-is-ethereum-slide-1-title")}

- +

{t("page-what-is-ethereum-slide-1-desc-2")}

- +

{t("page-what-is-ethereum-slide-2-title")}

- +

{t("page-what-is-ethereum-slide-2-desc-1")}

- +

{t("page-what-is-ethereum-slide-3-title")}

- +

- +

{t("page-what-is-ethereum-slide-4-title")}

- +

{t("page-what-is-ethereum-slide-4-desc-1")}

{t("page-what-is-ethereum-slide-4-desc-2")}

- +