From 33e6aaa2f283a7b34994e21d57b07ce2117549af Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 7 Aug 2024 10:34:32 +0200 Subject: [PATCH 001/129] initial geteth page migration --- src/components/MainArticle.tsx | 24 ++ src/components/MdComponents.tsx | 8 +- src/components/ui/card.tsx | 79 ++++++ src/pages/get-eth.tsx | 459 +++++++++++++------------------- src/styles/global.css | 6 + tailwind.config.ts | 1 + tailwind/ui/buttons/Button.tsx | 12 +- 7 files changed, 306 insertions(+), 283 deletions(-) create mode 100644 src/components/ui/card.tsx diff --git a/src/components/MainArticle.tsx b/src/components/MainArticle.tsx index 3ce72e677d4..2063bb908b4 100644 --- a/src/components/MainArticle.tsx +++ b/src/components/MainArticle.tsx @@ -1,9 +1,33 @@ +import { HTMLAttributes } from "react" import { Box, type BoxProps } from "@chakra-ui/react" +import { cn } from "@/lib/utils/cn" + import { MAIN_CONTENT_ID } from "@/lib/constants" +/** + * DEPRECATED: Use `TWMainArticle` instead + * + * TODO: Remove this component once all components are using Tailwind + * + * @deprecated + */ const MainArticle = (props: BoxProps) => ( ) +/** + * Tailwind version of `MainArticle` + */ +export const TWMainArticle = ({ + className, + ...props +}: HTMLAttributes) => ( +
+) + export default MainArticle diff --git a/src/components/MdComponents.tsx b/src/components/MdComponents.tsx index 9affa173a57..38c139ee601 100644 --- a/src/components/MdComponents.tsx +++ b/src/components/MdComponents.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react" +import { BaseHTMLAttributes, ComponentProps } from "react" import { Badge, Box, @@ -28,6 +28,8 @@ import { mdxTableComponents } from "@/components/Table" import TooltipLink from "@/components/TooltipLink" import YouTube from "@/components/YouTube" +import { cn } from "@/lib/utils/cn" + import ContributorsQuizBanner from "./Banners/ContributorsQuizBanner" import GlossaryTooltip from "./Glossary/GlossaryTooltip" import { StandaloneQuizWidget } from "./Quiz/QuizWidget" @@ -215,7 +217,9 @@ export const MobileButtonDropdown = ( props: ComponentProps ) => -export const Divider = () => +export const Divider = ({ className }: BaseHTMLAttributes) => ( +
+) // All custom React components export const reactComponents = { diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 00000000000..9d398c7457b --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,79 @@ +import * as React from "react" + +import { cn } from "@/lib/utils/cn" + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardFooter.displayName = "CardFooter" + +export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx index e7b737e67bb..2627eadd5ed 100644 --- a/src/pages/get-eth.tsx +++ b/src/pages/get-eth.tsx @@ -1,34 +1,31 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next/types" import { useTranslation } from "next-i18next" import { serverSideTranslations } from "next-i18next/serverSideTranslations" -import type { ComponentPropsWithRef } from "react" -import { - Box, - type BoxProps, - Flex, - type FlexProps, - useBreakpointValue, -} from "@chakra-ui/react" +import type { ReactNode } from "react" +import { Box, useBreakpointValue } from "@chakra-ui/react" import type { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types" -import ButtonLink from "@/components/Buttons/ButtonLink" import CalloutBanner from "@/components/CalloutBanner" -import Card from "@/components/Card" import type { CardListItem } from "@/components/CardList" import CardList from "@/components/CardList" import CentralizedExchanges from "@/components/CentralizedExchanges" +import Emoji from "@/components/Emoji" import EthPriceCard from "@/components/EthPriceCard" import FeedbackCard from "@/components/FeedbackCard" import { Image } from "@/components/Image" import InfoBanner from "@/components/InfoBanner" -import InlineLink from "@/components/Link" -import MainArticle from "@/components/MainArticle" +import { TWMainArticle as MainArticle } from "@/components/MainArticle" import { Divider } from "@/components/MdComponents" -import OldHeading from "@/components/OldHeading" -import Text from "@/components/OldText" import PageMetadata from "@/components/PageMetadata" import Translation from "@/components/Translation" +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" import { existsNamespace } from "@/lib/utils/existsNamespace" import { getLastDeployDate } from "@/lib/utils/getLastDeployDate" @@ -37,6 +34,9 @@ import { trackCustomEvent } from "@/lib/utils/matomo" import { getLocaleTimestamp } from "@/lib/utils/time" import { getRequiredNamespacesForPage } from "@/lib/utils/translations" +import { ButtonLink } from "../../tailwind/ui/buttons/Button" +import InlineLink from "../../tailwind/ui/Link" + import uniswap from "@/public/images/dapps/uni.png" import dapps from "@/public/images/doge-computer.png" import oneinch from "@/public/images/exchanges/1inch.png" @@ -45,60 +45,28 @@ import kyber from "@/public/images/exchanges/kyber.png" import hero from "@/public/images/get-eth.png" import wallet from "@/public/images/wallet.png" -const Page = (props: ChildOnlyProp) => ( - -) - -export const Content = (props: BoxProps) => - -const StyledCard = (props: ComponentPropsWithRef) => ( - -) - -const TwoColumnContent = (props: FlexProps) => ( - -) +type CardProps = { + children: ReactNode + emoji: string + title: ReactNode + description: ReactNode +} -const LeftColumn = (props: ChildOnlyProp) => ( - +const StyledCard = ({ children, emoji, title, description }: CardProps) => ( + + + + {title} + + +

{description}

+ + {children} + ) -const RightColumn = (props: ChildOnlyProp) => ( - +const TwoColumnContent = (props: ChildOnlyProp) => ( +
) type Props = BasePageProps & { @@ -182,25 +150,13 @@ const GetEthPage = ({ }) return ( - + - +
{t("page-get-eth-hero-image-alt")} - - +
+

{t("page-get-eth-where-to-buy-title")} - - +

+

{t("page-get-eth-where-to-buy-desc")} - +


{t("page-get-eth-search-by-country")} - - - +
+
+ +
- - - - {t("common:listing-policy-disclaimer")}{" "} - - {t("listing-policy-raise-issue-link")} - - - - - {t("page-get-eth-new-to-eth")}{" "} - - {t("page-get-eth-whats-eth-link")} +
+ +
+

+ + {t("common:listing-policy-disclaimer")}{" "} + + {t("listing-policy-raise-issue-link")} - - - - +

+ + {t("page-get-eth-new-to-eth")}{" "} + + {t("page-get-eth-whats-eth-link")} + + +
+ +
- - - +
+ +
+

{t("page-get-eth-dexs")} - - - - - - {t("page-get-eth-what-are-DEX's")} - - {t("page-get-eth-dexs-desc")} - - {t("page-get-eth-dexs-desc-2")}{" "} - - {t("page-get-eth-smart-contract-link")} - - - {t("page-get-eth-dexs-desc-3")} - {t("page-get-eth-need-wallet")} - - {t("page-get-eth-get-wallet-btn")} - - - - - - - - {t("page-get-eth-other-cryptos")} - - {t("page-get-eth-swapping")} - - {t("page-get-eth-warning")} - - - - - +

+ +
+

+ {t("page-get-eth-what-are-DEX's")} +

+

{t("page-get-eth-dexs-desc")}

+

+ {t("page-get-eth-dexs-desc-2")}{" "} + + {t("page-get-eth-smart-contract-link")} + +

+

{t("page-get-eth-dexs-desc-3")}

+

{t("page-get-eth-need-wallet")}

+ + {t("page-get-eth-get-wallet-btn")} + + + + +
+ +
+

+ {t("page-get-eth-other-cryptos")} +

+

{t("page-get-eth-swapping")}

+ + {t("page-get-eth-warning")} +
+ +
+ + + +
+

{t("page-get-eth-keep-it-safe")} - - - - - - - {t("page-get-eth-community-safety")} - - - - - {t("page-get-eth-description")} - {t("page-get-eth-security")} - - {t("page-get-eth-protect-eth-in-wallet")} - - {t("page-get-eth-protect-eth-desc")} - - {t("page-get-eth-your-address-wallet-link")} - - - {t("page-get-eth-your-address")} - - {t("page-get-eth-your-address-desc")} - - - 0x0125e2478d69eXaMpLe81766fef5c120d30fb53f - - - {t("page-get-eth-do-not-copy")} - - - {t("page-get-eth-your-address-desc-3")} - - {t("page-get-eth-wallet-instructions")} - - {t("page-get-eth-wallet-instructions-lost")} - - - - - - - {t("page-get-eth-checkout-dapps-btn")} - - - +

+ +
+ +

+ {t("page-get-eth-community-safety")} +

+ +
+ +
+
+

{t("page-get-eth-description")}

+

{t("page-get-eth-security")}

+
+
+

+ {t("page-get-eth-protect-eth-in-wallet")} +

+

{t("page-get-eth-protect-eth-desc")}

+ + {t("page-get-eth-your-address-wallet-link")} + +
+
+

+ {t("page-get-eth-your-address")} +

+

{t("page-get-eth-your-address-desc")}

+
+

+ 0x0125e2478d69eXaMpLe81766fef5c120d30fb53f +

+

+ {t("page-get-eth-do-not-copy")} +

+
+

{t("page-get-eth-your-address-desc-3")}

+
+
+

+ {t("page-get-eth-wallet-instructions")} +

+

{t("page-get-eth-wallet-instructions-lost")}

+
+
+ +
+ + + +
+ +
+ + {t("page-get-eth-checkout-dapps-btn")} + +
+ +
+ - + ) } diff --git a/src/styles/global.css b/src/styles/global.css index c221c3b83e9..e05a2c7941d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -166,6 +166,12 @@ rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100% ); + --radial-gradient: radial-gradient( + 46.28% 66.31% at 66.95% 58.35%, + rgba(127, 127, 213, 0.2) 0%, + rgba(134, 168, 231, 0.2) 50%, + rgba(145, 234, 228, 0.2) 100% + ); --table-box-shadow: 0 14px 66px hsla(0, 0%, 96.1%, 0.07), 0 10px 17px hsla(0, 0%, 96.1%, 0.03), 0 4px 7px hsla(0, 0%, 96.1%, 0.05); --table-item-box-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.1); diff --git a/tailwind.config.ts b/tailwind.config.ts index 0d659a0dd6e..55f2086b7b2 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -91,6 +91,7 @@ const config = { }, backgroundImage: { "bg-main-gradient": "var(--bg-main-gradient)", + "radial-gradient": "var(--radial-gradient)", }, boxShadow: { "table-box": "var(--table-box-shadow)", diff --git a/tailwind/ui/buttons/Button.tsx b/tailwind/ui/buttons/Button.tsx index 082f2fef826..cc1e849472b 100644 --- a/tailwind/ui/buttons/Button.tsx +++ b/tailwind/ui/buttons/Button.tsx @@ -106,15 +106,21 @@ const Button = React.forwardRef( ) Button.displayName = "Button" -type ButtonLinkProps = Omit & { +type ButtonLinkProps = LinkProps & { buttonProps?: ButtonProps customEventOptions?: MatomoEventOptions } const ButtonLink = React.forwardRef( - ({ buttonProps, customEventOptions, children, ...linkProps }, ref) => { - const handleClick = () => { + ( + { buttonProps, onClick, customEventOptions, children, ...linkProps }, + ref + ) => { + const handleClick: React.MouseEventHandler = ( + ...args + ) => { customEventOptions && trackCustomEvent(customEventOptions) + onClick?.(...args) } return (
) } diff --git a/src/pages/eth.tsx b/src/pages/eth.tsx index 8441e31e26e..0a8634e8729 100644 --- a/src/pages/eth.tsx +++ b/src/pages/eth.tsx @@ -393,7 +393,7 @@ const EthPage = () => { {t("page-eth-currency-for-future")} {t("page-eth-is-money")} {t("page-eth-currency-for-apps")} - + {t("page-eth-button-buy-eth")} diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx index 2627eadd5ed..adcee878ae5 100644 --- a/src/pages/get-eth.tsx +++ b/src/pages/get-eth.tsx @@ -2,7 +2,7 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next/types" import { useTranslation } from "next-i18next" import { serverSideTranslations } from "next-i18next/serverSideTranslations" import type { ReactNode } from "react" -import { Box, useBreakpointValue } from "@chakra-ui/react" +import { useBreakpointValue } from "@chakra-ui/react" import type { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types" @@ -177,7 +177,7 @@ const GetEthPage = ({ {t("page-get-eth-where-to-buy-desc")}


- + From 27311e547366216c83397843d9fc9abc3ea9f31c Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 7 Aug 2024 16:19:32 +0200 Subject: [PATCH 004/129] change darkmode config to read from data-theme attr instead of a classs --- tailwind.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 55f2086b7b2..75268ed09a1 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,7 +2,7 @@ import type { Config } from "tailwindcss" import plugin from "tailwindcss/plugin" const config = { - darkMode: ["class"], + darkMode: ["selector", '[data-mode="dark"]'], content: [ "./src/**/*.{ts,tsx}", // TODO: remove after migration From a54ac22ef83fc63909a38a5266f42ace3f3fcaf2 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 7 Aug 2024 16:22:49 +0200 Subject: [PATCH 005/129] fix gradient --- src/styles/global.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/global.css b/src/styles/global.css index e05a2c7941d..29d090ee7e3 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -112,6 +112,12 @@ rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100% ); + --radial-gradient: radial-gradient( + 46.28% 66.31% at 66.95% 58.35%, + rgba(127, 127, 213, 0.2) 0%, + rgba(134, 168, 231, 0.2) 50%, + rgba(145, 234, 228, 0.2) 100% + ); --table-box-shadow: 0 14px 66px rgba(0, 0, 0, 0.07), 0 10px 17px rgba(0, 0, 0, 0.03), 0 4px 7px rgba(0, 0, 0, 0.05); --table-item-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); From 78ae13859986cb8f51505c728c96b7062b658075 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 7 Aug 2024 17:26:52 +0200 Subject: [PATCH 006/129] migrate CentralizedExchanges component --- src/components/CentralizedExchanges/index.tsx | 71 +++++++------------ 1 file changed, 24 insertions(+), 47 deletions(-) diff --git a/src/components/CentralizedExchanges/index.tsx b/src/components/CentralizedExchanges/index.tsx index 32247068290..9743b12bf12 100644 --- a/src/components/CentralizedExchanges/index.tsx +++ b/src/components/CentralizedExchanges/index.tsx @@ -1,53 +1,41 @@ import { useRouter } from "next/router" import { useTranslation } from "next-i18next" -import { Box, Center, Flex } from "@chakra-ui/react" import type { ChildOnlyProp, Lang } from "@/lib/types" import CardList from "@/components/CardList" import Emoji from "@/components/Emoji" -import InlineLink from "@/components/Link" -import OldHeading from "@/components/OldHeading" -import Text from "@/components/OldText" import Select from "@/components/Select" import { getLocaleTimestamp } from "@/lib/utils/time" import { WEBSITE_EMAIL } from "@/lib/constants" +import InlineLink from "../../../tailwind/ui/Link" + import { useCentralizedExchanges } from "@/hooks/useCentralizedExchanges" const ListContainer = (props: ChildOnlyProp) => ( - +
) const ResultsContainer = (props: ChildOnlyProp) => ( - *": { - _first: { - me: { base: 0, md: 6 }, - }, - }, - }} +
) const EmptyStateContainer = (props: ChildOnlyProp) => ( -
+
) const SuccessContainer = (props: ChildOnlyProp) => ( - +
) const EmptyStateText = (props: ChildOnlyProp) => ( - +

) const NoResults = ({ children }) => ( @@ -62,14 +50,14 @@ const NoResults = ({ children }) => ( ) const NoResultsSingle = ({ children }) => ( -

- +
+

{/* TODO: Fix `children` structure to include email link within i18n string */} {children}{" "} {WEBSITE_EMAIL}. - +

-
+
) type CentralizedExchangesProps = { lastDataUpdateDate: string } @@ -91,18 +79,12 @@ const CentralizedExchanges = ({ const lastUpdated = getLocaleTimestamp(locale as Lang, lastDataUpdateDate) return ( - - - {t("page-get-eth-exchanges-header")} - - +
+

{t("page-get-eth-exchanges-header")}

+

{t("page-get-eth-exchanges-intro")} - - +

+
- + From 3566ff2d35cd5be26ab1d2c551d9b25cfaa24aaf Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 20 Sep 2024 16:27:35 -0700 Subject: [PATCH 031/129] deprecate: rm unused Input component --- src/components/Input/Input.stories.tsx | 43 ------------------------ src/components/Input/index.tsx | 45 -------------------------- 2 files changed, 88 deletions(-) delete mode 100644 src/components/Input/Input.stories.tsx delete mode 100644 src/components/Input/index.tsx diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx deleted file mode 100644 index 74fb88a0336..00000000000 --- a/src/components/Input/Input.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from "react" -import { BsSlashSquare } from "react-icons/bs" -import { VStack } from "@chakra-ui/react" -import { Meta, StoryObj } from "@storybook/react" - -import Input from "." - -const meta = { - title: "Atoms / Form / Input", - component: Input, - args: { - rightIcon: , - }, -} satisfies Meta - -export default meta - -type Story = StoryObj - -export const Sizes: Story = { - args: { - placeholder: "Search", - }, - render: (args) => ( - - - - - ), -} - -export const ElementVariations: Story = { - args: { - placeholder: "input text", - }, - render: (args) => ( - - - - - - ), -} diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx deleted file mode 100644 index e84f31f29ec..00000000000 --- a/src/components/Input/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from "react" -import { - Input as ChakraInput, - InputGroup, - InputGroupProps, - InputProps as ChakraInputProps, - InputRightElement, -} from "@chakra-ui/react" - -type CommonProps = ChakraInputProps - -type NoIconProps = CommonProps & { rightIcon?: never } - -type WithIconProps = CommonProps & { - /** - * The Icon used to render `InputRightElement` on the right side of the input - */ - rightIcon: JSX.Element - /** - * Primarily for style props to be applied to the wrapper - */ - inputGroupProps?: InputGroupProps -} - -type InputProps = NoIconProps | WithIconProps - -function Input(props: NoIconProps): JSX.Element -function Input(props: WithIconProps): JSX.Element -function Input(props: InputProps) { - if (props.rightIcon) { - const { size, inputGroupProps, rightIcon: Icon, ...rest } = props - return ( - - - {Icon} - - ) - } - - const { size, ...rest } = props - - return -} - -export default Input From 297b5dcba67a87b661261b50e2eacf0d88d4300c Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 20 Sep 2024 17:14:25 -0700 Subject: [PATCH 032/129] fix: hover contrast ratio --- src/components/ui/Select/innerComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/Select/innerComponents.tsx b/src/components/ui/Select/innerComponents.tsx index a3d0212f3d9..5ce20a856f7 100644 --- a/src/components/ui/Select/innerComponents.tsx +++ b/src/components/ui/Select/innerComponents.tsx @@ -19,7 +19,7 @@ export const selectVariants = tv({ container: "w-full min-h-10.5 [--border-base-width:1px] relative z-[1] cursor-pointer", control: - "p-2 flex items-center gap-4 border-[length:var(--border-base-width)] border-current text-[color:var(--my-var)] not-[[data-expanded=true]]:focus-within:outline-3 not-[[data-expanded=true]]:focus-within:outline-primary-hover not-[[data-expanded=true]]:focus-within:outline -outline-offset-2 [&[data-expanded=true]]:bg-background-highlight [&[data-expanded=true]]:text-primary [&[data-expanded=true]]:border-primary-low-contrast hover:text-primary hover:border-primary-low-contrast", + "p-2 flex items-center gap-4 border-[length:var(--border-base-width)] border-current text-[color:var(--my-var)] not-[[data-expanded=true]]:focus-within:outline-3 not-[[data-expanded=true]]:focus-within:outline-primary-hover not-[[data-expanded=true]]:focus-within:outline -outline-offset-2 [&[data-expanded=true]]:bg-background-highlight [&[data-expanded=true]]:text-primary [&[data-expanded=true]]:border-primary-low-contrast hover:text-primary hover:border-primary-high-contrast", indicatorIcon: "text-sm leading-none transition-transform [*[data-expanded=true]_&]:rotate-180", menu: "-z-[1] absolute w-full", From 3788ef4ae6eb9f779ed1778f6ff20d2fe4fda9ee Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 20 Sep 2024 19:27:58 -0700 Subject: [PATCH 033/129] refactor: menu color tokens uses a "default, low, medium, high" structure for menu backgrounds and text colors, representing different layers to stacking menu sections. Blends this with existing DS to introduce "low" "medium" and "high" background colors. --- src/components/Nav/Menu/MenuContent.tsx | 36 +++++++-------- src/components/Nav/Mobile/LvlAccordion.tsx | 8 ++-- src/components/Nav/Mobile/MenuBody.tsx | 2 +- src/styles/semantic-tokens.css | 51 ++++++++-------------- tailwind.config.ts | 39 +++++------------ 5 files changed, 52 insertions(+), 84 deletions(-) diff --git a/src/components/Nav/Menu/MenuContent.tsx b/src/components/Nav/Menu/MenuContent.tsx index c3ba06030fb..0aebfd8c44c 100644 --- a/src/components/Nav/Menu/MenuContent.tsx +++ b/src/components/Nav/Menu/MenuContent.tsx @@ -13,35 +13,35 @@ export const navMenuVariants = tv({ slots: { base: "text-body", item: "has-[button[data-state=open]]:rounded-s-md has-[button[data-state=open]]:rounded-e-none has-[button[data-state=open]]:-me-2 has-[button[data-state=open]]:pe-2", - link: "group w-full relative py-4 hover:text-menu-active [&:hover_p]:text-menu-active focus-visible:text-menu-active [&:focus-visible_p]:text-menu-active hover:outline-0 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none", + link: "group w-full relative py-4 hover:text-primary [&:hover_p]:text-primary focus-visible:text-primary [&:focus-visible_p]:text-primary hover:outline-0 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none", linkSubtext: "text-sm", submenu: "grid h-full w-full grid-cols-1", }, variants: { level: { 1: { - submenu: "grid-cols-3 bg-menu-1-background", - item: "has-[button[data-state=open]]:bg-menu-1-active-background", - link: "data-[active=true]:bg-menu-1-active-background hover:bg-menu-1-active-background focus-visible:bg-menu-1-active-background", - linkSubtext: "group-[data-active=true]:text-menu-1-subtext", + submenu: "grid-cols-3 bg-background", + item: "has-[button[data-state=open]]:bg-background-low", + link: "data-[active=true]:bg-background-low hover:bg-background-low focus-visible:bg-background-low", + linkSubtext: "group-[data-active=true]:text-body-menu", }, 2: { - submenu: "grid-cols-2 bg-menu-2-background", - item: "has-[button[data-state=open]]:bg-menu-2-active-background", - link: "hover:bg-menu-2-active-background focus-visible:bg-menu-2-active-background data-[active=true]:bg-menu-2-active-background", - linkSubtext: "group-[data-active=true]:text-menu-2-subtext", + submenu: "grid-cols-2 bg-background-low", + item: "has-[button[data-state=open]]:bg-background-medium", + link: "hover:bg-background-medium focus-visible:bg-background-medium data-[active=true]:bg-background-medium", + linkSubtext: "group-[data-active=true]:text-body-menu-low", }, 3: { - submenu: "grid-cols-1 bg-menu-3-background", - item: "has-[button[data-state=open]]:bg-menu-3-active-background", - link: "data-[active=true]:bg-menu-3-active-background hover:bg-menu-3-active-background", - linkSubtext: "group-[data-active=true]:text-menu-3-subtext", + submenu: "grid-cols-1 bg-background-medium", + item: "has-[button[data-state=open]]:bg-background-low`", + link: "data-[active=true]:bg-background-low hover:bg-background-low", + linkSubtext: "group-[data-active=true]:text-body-menu-medium", }, 4: { - submenu: "grid-cols-1 bg-menu-4-background", - item: "has-[button[data-state=open]]:bg-menu-4-active-background", - link: "data-[active=true]:bg-menu-4-active-background hover:bg-menu-4-active-background", - linkSubtext: "group-[data-active=true]:text-menu-4-subtext", + submenu: "grid-cols-1 bg-background-high", + item: "has-[button[data-state=open]]:bg-background-medium", + link: "data-[active=true]:bg-background-medium hover:bg-background-medium", + linkSubtext: "group-[data-active=true]:text-body-menu-high", }, }, }, @@ -62,7 +62,7 @@ const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => { { diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index a0b3a5ade94..157c68032f7 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -14,7 +14,10 @@ --background: var(--white); --background-highlight: var(--gray-50); - --background-medium: var(--gray-200); /* TODO: VERIFY */ + /* TODO: Add "low" "medium" and "high" to design system */ + --background-low: var(--gray-100); + --background-medium: var(--gray-200); + --background-high: var(--gray-300); /* TODO: Add border color tokens to match DS */ @@ -103,22 +106,10 @@ --shadow-window-box-5: 0px -64px 120px 80px hsla(var(--purple-100), var(--shadow-window-box-5-opacity)); /* Menu colors */ - --menu: var(--body); - --menu-hover: var(--gray-200); - --menu-active: var(--primary); - --menu-active-background: var(--primary-high-contrast); - --menu-1-subtext: var(--gray-400); - --menu-1-background: var(--white); - --menu-1-active-background: var(--gray-150); - --menu-2-subtext: var(--gray-400); - --menu-2-background: var(--gray-150); - --menu-2-active-background: var(--gray-200); - --menu-3-subtext: var(--gray-500); - --menu-3-background: var(--gray-200); - --menu-3-active-background: var(--gray-100); - --menu-4-subtext: var(--gray-700); - --menu-4-background: var(--gray-300); - --menu-4-active-background: var(--gray-200); + --body-menu: var(--gray-400); + --body-menu-low: var(--gray-400); + --body-menu-medium: var(--gray-500); + --body-menu-high: var(--gray-700); } /* Dark mode token declarations */ @@ -132,7 +123,11 @@ --background: var(--black); --background-highlight: var(--gray-900); - --background-medium: var(--gray-950); /* TODO: VERIFY */ + + /* TODO: Add "low" "medium" and "high" to design system */ + --background-low: var(--gray-700); + --background-medium: var(--gray-600); + --background-high: var(--gray-800); /* TODO: Add border color tokens to match DS */ @@ -188,21 +183,9 @@ --shadow-window-box-5-opacity: 0.06; /* Menu colors */ - --menu: var(--body); - --menu-hover: var(--gray-200); - --menu-active: var(--primary); - --menu-active-background: var(--primary-high-contrast); - --menu-1-subtext: var(--gray-400); - --menu-1-background: var(--black); - --menu-1-active-background: var(--gray-700); - --menu-2-subtext: var(--gray-300); - --menu-2-background: var(--gray-700); - --menu-2-active-background: var(--gray-600); - --menu-3-subtext: var(--gray-300); - --menu-3-background: var(--gray-600); - --menu-3-active-background: var(--gray-700); - --menu-4-subtext: var(--gray-300); - --menu-4-background: var(--gray-700); - --menu-4-active-background: var(--gray-800); + --body-menu: var(--gray-400); + --body-menu-low: var(--gray-300); + --body-menu-medium: var(--gray-300); + --body-menu-high: var(--gray-300); } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 63d98546675..a51767283f5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -136,6 +136,14 @@ const config = { medium: "hsla(var(--body-medium))", light: "hsla(var(--body-light))", inverse: "hsla(var(--body-inverse))", + + // TODO: Add "body-menu" to design system + menu: { + DEFAULT: "hsla(var(--body-menu))", + low: "hsla(var(--body-menu-low))", + medium: "hsla(var(--body-menu-medium))", + high: "hsla(var(--body-menu-high))", + }, }, disabled: "hsla(var(--disabled))", @@ -143,6 +151,10 @@ const config = { background: { DEFAULT: "hsla(var(--background))", highlight: "hsla(var(--background-highlight))", + // TODO : Add "low" "medium" and "high" to design system + low: "hsla(var(--background-low))", + medium: "hsla(var(--background-medium))", + high: "hsla(var(--background-high))", }, // TODO: Add border color tokens to match DS @@ -192,33 +204,6 @@ const config = { light: "hsla(var(--warning-light))", }, - menu: { - DEFAULT: "hsla(var(--menu))", - hover: "hsla(var(--menu-hover))", - active: "hsla(var(--menu-active))", - "active-background": "hsla(var(--menu-active-background))", - 1: { - subtext: "hsla(var(--menu-1-subtext))", - background: "hsla(var(--menu-1-background))", - "active-background": "hsla(var(--menu-1-active-background))", - }, - 2: { - subtext: "hsla(var(--menu-2-subtext))", - background: "hsla(var(--menu-2-background))", - "active-background": "hsla(var(--menu-2-active-background))", - }, - 3: { - subtext: "hsla(var(--menu-3-subtext))", - background: "hsla(var(--menu-3-background))", - "active-background": "hsla(var(--menu-3-active-background))", - }, - 4: { - subtext: "hsla(var(--menu-4-subtext))", - background: "hsla(var(--menu-4-background))", - "active-background": "hsla(var(--menu-4-active-background))", - }, - }, - /** @deprecated */ "switch-background": "hsla(var(--switch-background))", // TODO: Migrate "tooltip-shadow": "var(--tooltip-shadow)", From e0888ef1fe5fe6e11dd2ee608fded356153c4e1c Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 20 Sep 2024 19:28:30 -0700 Subject: [PATCH 034/129] deprecate: primar-light/dark color tokens --- src/styles/docsearch.css | 2 +- src/styles/global.css | 12 ------------ tailwind.config.ts | 4 ---- 3 files changed, 1 insertion(+), 17 deletions(-) diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css index 3c942d411ed..05611fbea1c 100644 --- a/src/styles/docsearch.css +++ b/src/styles/docsearch.css @@ -101,7 +101,7 @@ } .DocSearch-Hit[aria-selected="true"] a { --docsearch-hit-active-color: theme(backgroundColor.background.DEFAULT); - @apply border-transparent bg-primary-hover shadow-[4px_4px_0_0_var(--primary-light)]; + @apply border-transparent bg-primary-hover shadow-[4px_4px_0_0_var(--primary-visited)]; } .DocSearch-Hit-content-wrapper { diff --git a/src/styles/global.css b/src/styles/global.css index 8b8595dba5f..8c3442972e7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -13,12 +13,6 @@ --font-inter: Inter, sans-serif; --font-mono: "IBM Plex Mono", Courier, monospace; - /* Semantic Colors: Light mode */ - /* ! Deprecating primary-light */ - --primary-light: var(--blue-100); - /* ! Deprecating primary-dark */ - --primary-dark: var(--blue-700); - /* Misc sematics: light mode */ --tooltip-shadow: rgba(0, 0, 0, 0.24); --switch-background: var(--gray-300); @@ -52,12 +46,6 @@ } [data-theme="dark"] { - /* Semantic Colors: Dark mode */ - /* ! Deprecating primary-light */ - --primary-light: hsla(var(--orange-100)); - /* ! Deprecating primary-dark */ - --primary-dark: hsla(var(--orange-800)); - /* Misc sematics: dark mode */ --tooltip-shadow: rgba(255, 255, 255, 0.24); --switch-background: rgba(255, 255, 255, 0.24); diff --git a/tailwind.config.ts b/tailwind.config.ts index 63d98546675..112f3b9f98a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -155,10 +155,6 @@ const config = { visited: "hsla(var(--primary-visited))", action: "hsla(var(--primary-action))", "action-hover": "hsla(var(--primary-action-hover))", - /** @deprecated */ - light: "hsla(var(--primary-light))", - /** @deprecated */ - dark: "hsla(var(--primary-dark))", }, accent: { From db239f78e3b2cd3bf19dbf9d5a6c98f9fbd1df92 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 21 Sep 2024 12:35:33 -0700 Subject: [PATCH 035/129] feat: add ui/swiper --- src/components/ui/swiper.tsx | 67 ++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/components/ui/swiper.tsx diff --git a/src/components/ui/swiper.tsx b/src/components/ui/swiper.tsx new file mode 100644 index 00000000000..041eb094f15 --- /dev/null +++ b/src/components/ui/swiper.tsx @@ -0,0 +1,67 @@ +import * as React from "react" +import { useTranslation } from "next-i18next" +import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules" +import { + Swiper as SwiperReact, + type SwiperProps as SwiperReactProps, + SwiperRef, + SwiperSlide, +} from "swiper/react" + +import { ChevronNext, ChevronPrev } from "@/components/Chevron" + +import { cn } from "@/lib/utils/cn" + +import "swiper/css" +import "swiper/css/navigation" +import "swiper/css/pagination" +import "swiper/css/effect-cards" + +const SwiperContainer = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +SwiperContainer.displayName = "SwiperContainer" + +type SwiperProps = SwiperReactProps & { + children: React.ReactNode[] +} +const Swiper = React.forwardRef( + ({ children, ...props }, ref) => { + const { t } = useTranslation("common") + return ( + + {children.map((child, index) => ( + {child} + ))} + + +
+ + + ) + } +) +Swiper.displayName = "Swiper" + +export { Swiper, SwiperContainer } From 1afedb19d2962bd2f6e6bc8183f1a54f3ad85a00 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 21 Sep 2024 12:37:37 -0700 Subject: [PATCH 036/129] refactor: use ui/swiper wrapping Swiper with SwiperContainer --- src/pages/index.tsx | 135 +++++++++++++++++---------------- src/pages/what-is-ethereum.tsx | 91 +++++++++++----------- 2 files changed, 115 insertions(+), 111 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5904a6197af..971e26fbf60 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -28,7 +28,6 @@ import CalendarAdd from "@/components/icons/calendar-add.svg" import { TwImage } from "@/components/Image" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" -import Swiper from "@/components/Swiper" import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner" import { Button, ButtonLink } from "@/components/ui/buttons/Button" import { @@ -48,6 +47,7 @@ import { SectionTag, } from "@/components/ui/section" import { SkeletonLines } from "@/components/ui/skeleton" +import { Swiper, SwiperContainer } from "@/components/ui/swiper" import WindowBox from "@/components/WindowBox" import { cn } from "@/lib/utils/cn" @@ -265,32 +265,34 @@ const HomePage = ({
{/* Mobile */} - { - trackCustomEvent({ - eventCategory: "Homepage", - eventAction: "mobile use cases", - eventName: `swipe to card ${activeIndex + 1}`, - }) - }} > - {bentoItems.map(({ className, ...item }) => ( - - ))} - - + { + trackCustomEvent({ + eventCategory: "Homepage", + eventAction: "mobile use cases", + eventName: `swipe to card ${activeIndex + 1}`, + }) + }} + > + {bentoItems.map(({ className, ...item }) => ( + + ))} + + {/* Desktop */} {bentoItems.map(({ className, ...item }) => (

{t("page-index:page-index-posts-subtitle")}

- - {rssItems.map(({ pubDate, title, source, link, imgSrc }) => ( - - - {/* eslint-disable-next-line @next/next/no-img-element */} - - - - {title} - {isValidDate(pubDate) && ( - - {new Intl.DateTimeFormat(locale, { - month: "long", - day: "numeric", - year: "numeric", - }).format(new Date(pubDate))} - - )} - {source} - - - ))} - + + + {rssItems.map(({ pubDate, title, source, link, imgSrc }) => ( + + + {/* eslint-disable-next-line @next/next/no-img-element */} + + + + {title} + {isValidDate(pubDate) && ( + + {new Intl.DateTimeFormat(locale, { + month: "long", + day: "numeric", + year: "numeric", + }).format(new Date(pubDate))} + + )} + {source} + + + ))} + +

{t("page-index:page-index-posts-action")}

diff --git a/src/pages/what-is-ethereum.tsx b/src/pages/what-is-ethereum.tsx index fa57e31e40a..30994f07d19 100644 --- a/src/pages/what-is-ethereum.tsx +++ b/src/pages/what-is-ethereum.tsx @@ -30,13 +30,13 @@ import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget" 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" import { Button, ButtonLink } from "@/components/ui/buttons/Button" import { Center, Flex, HStack, Stack, VStack } from "@/components/ui/flex" import InlineLink from "@/components/ui/Link" +import { Swiper, SwiperContainer } from "@/components/ui/swiper" import { cn } from "@/lib/utils/cn" import { existsNamespace } from "@/lib/utils/existsNamespace" @@ -409,50 +409,51 @@ const WhatIsEthereumPage = ({

{t("page-what-is-ethereum-why-would-i-use-ethereum-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")}

-
- - + + { + 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 202b11d814a81ce3b747fbe1f157eca8d6b6d61c Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 21 Sep 2024 12:38:07 -0700 Subject: [PATCH 037/129] deprecate: components/Swiper/index.tsx in lieu of ui/swiper --- src/components/Swiper/index.tsx | 69 --------------------------------- 1 file changed, 69 deletions(-) delete mode 100644 src/components/Swiper/index.tsx diff --git a/src/components/Swiper/index.tsx b/src/components/Swiper/index.tsx deleted file mode 100644 index 26344808770..00000000000 --- a/src/components/Swiper/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useTranslation } from "next-i18next" -import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules" -import { - Swiper as SwiperParent, - type SwiperProps as SwiperParentProps, - SwiperSlide, -} from "swiper/react" - -import { ChevronNext, ChevronPrev } from "@/components/Chevron" - -import { cn } from "@/lib/utils/cn" - -import "swiper/css" -import "swiper/css/navigation" -import "swiper/css/pagination" -import "swiper/css/effect-cards" - -type SwiperProps = SwiperParentProps & { - children: React.ReactNode[] - /** - * Additional class names for the container element. - */ - containerClassName?: string - /** - * Additional class names for the slider element. - */ - sliderClass?: string -} - -const Swiper = ({ - children, - containerClassName, - sliderClass, - ...props -}: SwiperProps) => { - const { t } = useTranslation("common") - return ( -
- - {children.map((child, index) => ( - - {child} - - ))} - - -
- - -
- ) -} - -export default Swiper From cafd5e601ee20761bbad9dbc9ac81f71d19a50f6 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Sun, 22 Sep 2024 01:41:11 +0000 Subject: [PATCH 038/129] Update Crowdin contributors --- src/data/crowdin/combined-translators.json | 82 +++++++--------------- 1 file changed, 26 insertions(+), 56 deletions(-) diff --git a/src/data/crowdin/combined-translators.json b/src/data/crowdin/combined-translators.json index aeec9f86df8..79ed0a75bc5 100644 --- a/src/data/crowdin/combined-translators.json +++ b/src/data/crowdin/combined-translators.json @@ -6058,7 +6058,7 @@ { "id": 15810863, "username": "bitblondy", - "totalCosts": 595.9, + "totalCosts": 668.62, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15810863/medium/36dab07f1a377151348d57285a7955f7_default.png" } ] @@ -15164,21 +15164,15 @@ { "id": 15714091, "username": "elnotwick", - "totalCosts": 306.03, + "totalCosts": 338.35, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15714091/medium/4108416200d30f40ae15786e5b097631_default.png" }, { "id": 15770841, "username": "Angelito_18", - "totalCosts": 266.64, + "totalCosts": 307.04, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15770841/medium/f82644a45b17eed3facb1815dcc83d13.jpeg" }, - { - "id": 16518439, - "username": "lindsaymoralesb", - "totalCosts": 72.72, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16518439/medium/91ddbe6be5f70a5abbb14bb83db93a1a_default.png" - }, { "id": 15946267, "username": "socopower", @@ -26871,32 +26865,14 @@ { "id": 15954931, "username": "XofEE", - "totalCosts": 614.08, + "totalCosts": 668.62, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15954931/medium/7254d648c451b822632980e5bfcb61fa.png" }, - { - "id": 16515227, - "username": "geoffreylgv", - "totalCosts": 72.72, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16515227/medium/25c54b373c3fa4c9dd8819ec1603b05f.png" - }, - { - "id": 16351376, - "username": "Varadiell", - "totalCosts": 47.47, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16351376/medium/1dedcace4f1f17b6713fb41b8b4db778.png" - }, { "id": 12844463, "username": "MATsxm", "totalCosts": 13.13, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/12844463/medium/6fae27edb4b41f363587f737ea2f96de.jpg" - }, - { - "id": 16271298, - "username": "Actimike", - "totalCosts": 7.07, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16271298/medium/3610263d402c3c0bac9efd3320cb3942_default.png" } ] }, @@ -47514,6 +47490,12 @@ "username": "Beas", "totalCosts": 94.94, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14775946/medium/22ad4db44fa2f657ec257775cddc899c.jpg" + }, + { + "id": 16587541, + "username": "severitysingular", + "totalCosts": 41.41, + "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16587541/medium/942e3df69742c275e2f4b0d4531e28d2_default.png" } ] }, @@ -53136,6 +53118,12 @@ "username": "ferruzoft", "totalCosts": 3.03, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16500707/medium/01f9eaf5fa7ef367da0484b5183aa8a2_default.png" + }, + { + "id": 16564649, + "username": "eduhmello", + "totalCosts": 3.03, + "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16564649/medium/6724ab5d6d3551eaad75ae14a8cf6a3e.png" } ] }, @@ -54696,14 +54684,8 @@ { "id": 13986387, "username": "rafarocha", - "totalCosts": 595.9, + "totalCosts": 668.62, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13986387/medium/72bb87143f2a8d013cddac84c4e2afac.jpg" - }, - { - "id": 16496053, - "username": "henderson.mateus1", - "totalCosts": 72.72, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16496053/medium/a93e79f1bf3dfb040e800fdb6d0348cc.png" } ] }, @@ -66370,14 +66352,8 @@ { "id": 15964741, "username": "0xberil", - "totalCosts": 595.9, + "totalCosts": 668.62, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15964741/medium/f8fb148047395cf62c924755cb300f17_default.png" - }, - { - "id": 16518037, - "username": "semihbceylan", - "totalCosts": 72.72, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16518037/medium/cd6f34583b06f2f8b7d87375a4106b97_default.png" } ] }, @@ -69594,6 +69570,12 @@ "totalCosts": 20.2, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16373356/medium/eb9e5a9498604bac1b558c4a72e9af40.png" }, + { + "id": 16586679, + "username": "velhusteth", + "totalCosts": 19.19, + "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16586679/medium/2474f55077cf7db0ce3d88ad52a9ecd4.jpeg" + }, { "id": 16344048, "username": "bangyoyono.1", @@ -80385,21 +80367,9 @@ { "id": 15911295, "username": "Xin_Cheng", - "totalCosts": 582.77, + "totalCosts": 655.49, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15911295/medium/8aae130b64f46cd1ea960d085950a560_default.png" }, - { - "id": 13654347, - "username": "nodexy", - "totalCosts": 40.4, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13654347/medium/3ab7cd18ab323e7a796b44634bddc105.png" - }, - { - "id": 15236832, - "username": "Andypsl8", - "totalCosts": 32.32, - "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15236832/medium/59227a901011469470b992963cd20855.jpg" - }, { "id": 15381970, "username": "tzbkk", @@ -83139,7 +83109,7 @@ { "id": 13672373, "username": "comme.le.gnu", - "totalCosts": 681.75, + "totalCosts": 609.03, "avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13672373/medium/9921ca5aa36af788bfd5fc5a898fbf43.jpg" } ] From e609ee641b02e8c0f91d0f66c5e560b933f114f1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sun, 22 Sep 2024 17:22:37 -0700 Subject: [PATCH 039/129] refactor: explode ui/swiper into compossible parts migrates global.css styling into component --- src/components/ui/swiper.tsx | 107 ++++++++++++++++++++++++++++++++--- src/styles/global.css | 63 --------------------- 2 files changed, 98 insertions(+), 72 deletions(-) diff --git a/src/components/ui/swiper.tsx b/src/components/ui/swiper.tsx index 041eb094f15..0b708cca209 100644 --- a/src/components/ui/swiper.tsx +++ b/src/components/ui/swiper.tsx @@ -12,6 +12,8 @@ import { ChevronNext, ChevronPrev } from "@/components/Chevron" import { cn } from "@/lib/utils/cn" +import { Button, type ButtonProps } from "./buttons/Button" + import "swiper/css" import "swiper/css/navigation" import "swiper/css/pagination" @@ -25,24 +27,100 @@ const SwiperContainer = React.forwardRef< )) SwiperContainer.displayName = "SwiperContainer" +const SwiperNavButton = React.forwardRef( + ({ children, className, ...props }, ref) => ( + + ) +) +SwiperNavButton.displayName = "SwiperNavButton" + +const SwiperNextButton = React.forwardRef( + ({ children, className, ...props }, ref) => ( + + {children || } + + ) +) +SwiperNextButton.displayName = "SwiperNextButton" + +const SwiperPrevButton = React.forwardRef( + ({ children, className, ...props }, ref) => ( + + {children || } + + ) +) +SwiperPrevButton.displayName = "SwiperPrevButton" + +const SwiperPaginationDots = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +SwiperPaginationDots.displayName = "SwiperPaginationDots" + +const SwiperNavContainer = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +SwiperNavContainer.displayName = "SwiperNavContainer" + type SwiperProps = SwiperReactProps & { + navigation?: React.ReactNode children: React.ReactNode[] } const Swiper = React.forwardRef( - ({ children, ...props }, ref) => { + ({ children, navigation, ...props }, ref) => { const { t } = useTranslation("common") return ( ( {children.map((child, index) => ( {child} ))} - - -
- + {navigation || ( + + + + + + )} ) } ) Swiper.displayName = "Swiper" -export { Swiper, SwiperContainer } +export { + Swiper, + SwiperContainer, + SwiperNavButton, + SwiperNavContainer, + SwiperNextButton, + SwiperPaginationDots, + SwiperPrevButton, +} diff --git a/src/styles/global.css b/src/styles/global.css index 8b8595dba5f..ec2602ccf89 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -167,69 +167,6 @@ } } -@layer components { - .swiper-horizontal > .swiper-pagination-bullets, - .swiper-pagination-bullets.swiper-pagination-horizontal { - @apply bg-background-highlight; - } - - .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal { - @apply !relative; - } - - .swiper-pagination { - @apply relative mx-auto mt-8 flex h-[26px] max-w-48 items-center justify-center rounded-full bg-background-highlight; - } - - .css-posts-swiper .swiper-pagination { - @apply max-w-52 sm:max-w-40 lg:max-w-36; - } - - .swiper-pagination .swiper-pagination-bullet { - @apply bg-primary-high-contrast; - } - - .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal - .swiper-pagination-bullet-active { - @apply bg-primary-hover; - } - - .swiper-button-prev, - .swiper-button-next { - @apply !h-6 !w-fit fill-primary px-2; - } -} - -.swiper-button-prev, -.swiper-button-next { - top: calc(100% - 11px) !important; - --nav-inset: calc(50% - 6.5rem); -} - -@media (min-width: theme("screens.sm")) { - .swiper-button-prev, - .swiper-button-next { - --nav-inset: calc(50% - 5rem); - } -} - -@media (min-width: theme("screens.lg")) { - .swiper-button-prev, - .swiper-button-next { - --nav-inset: calc(50% - 4.5rem); - } -} - -.swiper-button-next { - inset-inline-end: var(--nav-inset) !important; - inset-inline-start: auto !important; -} - -.swiper-button-prev { - inset-inline-end: auto !important; - inset-inline-start: var(--nav-inset) !important; -} - .swiper-slide-shadow { background: transparent !important; } From 67adcd2a1dbd3df165476ea66547f9722a7758fe Mon Sep 17 00:00:00 2001 From: april <132745538+chenjiali-april@users.noreply.github.com> Date: Mon, 23 Sep 2024 15:58:21 +0800 Subject: [PATCH 040/129] Update community-events.json --- src/data/community-events.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/community-events.json b/src/data/community-events.json index d6fb6923395..aadf2cff0aa 100644 --- a/src/data/community-events.json +++ b/src/data/community-events.json @@ -655,7 +655,7 @@ "location": "Riyadh, Saudi Arabia", "description": "ETH Riyadh 2024 unites Middle Eastern developers and blockchain enthusiasts to explore and advance Ethereum technology. Join us for an exciting event that fosters collaboration and innovation in the blockchain ecosystem.", "startDate": "12/1/2024", - "endDate": "12/3/2024" + "endDate": "12/3/2024", "imageUrl": "https://ethriyadh.com/banner.jpg" } ] From 97c08a33b17d60ac7e83a942581391f872b8129c Mon Sep 17 00:00:00 2001 From: Nuno Loureiro Date: Mon, 23 Sep 2024 11:37:18 +0100 Subject: [PATCH 041/129] test 16 desktop and mobile 18 px font --- src/styles/global.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/global.css b/src/styles/global.css index 8c3442972e7..a29960df004 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -76,7 +76,7 @@ @layer base { body { - @apply !bg-background font-body text-sm !text-body lg:text-md; + @apply !bg-background font-body text-lg !text-body lg:text-md; } a { From 7f174914bfa714820dbc7b47accf66b922262fc7 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 23 Sep 2024 14:45:32 +0200 Subject: [PATCH 042/129] use Fragment component to declare the key for each item --- src/components/Breadcrumbs/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx index c5269c35968..6f0dea0cc25 100644 --- a/src/components/Breadcrumbs/index.tsx +++ b/src/components/Breadcrumbs/index.tsx @@ -1,3 +1,4 @@ +import { Fragment } from "react" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" @@ -72,8 +73,8 @@ const Breadcrumbs = ({ slug, startDepth = 0, ...props }: BreadcrumbsProps) => { const normalizePath = (path) => path.replace(/\/$/, "") // Remove trailing slash const isCurrentPage = normalizePath(slug) === normalizePath(fullPath) return ( - <> - + + {isCurrentPage ? ( {text} ) : ( @@ -85,7 +86,7 @@ const Breadcrumbs = ({ slug, startDepth = 0, ...props }: BreadcrumbsProps) => { / )} - + ) })} From f2b38a79c4794cf9deaf35cadd39fc99037c622f Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 23 Sep 2024 14:46:36 +0200 Subject: [PATCH 043/129] use next link for internal navigation --- src/components/ui/breadcrumb.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx index ff8da5f3d2c..2ff4246f2e4 100644 --- a/src/components/ui/breadcrumb.tsx +++ b/src/components/ui/breadcrumb.tsx @@ -1,4 +1,5 @@ import * as React from "react" +import Link, { LinkProps } from "next/link" import { LuChevronRight, LuMoreHorizontal } from "react-icons/lu" import { Slot } from "@radix-ui/react-slot" @@ -44,11 +45,12 @@ BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, - React.ComponentPropsWithoutRef<"a"> & { - asChild?: boolean - } + React.ComponentPropsWithoutRef<"a"> & + LinkProps & { + asChild?: boolean + } >(({ asChild, className, ...props }, ref) => { - const Comp = asChild ? Slot : "a" + const Comp = asChild ? Slot : Link return ( Date: Mon, 23 Sep 2024 17:10:03 +0100 Subject: [PATCH 044/129] Update src/data/community-events.json --- src/data/community-events.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/data/community-events.json b/src/data/community-events.json index aadf2cff0aa..2d94605a86c 100644 --- a/src/data/community-events.json +++ b/src/data/community-events.json @@ -654,8 +654,8 @@ "href": "https://ethriyadh.com/", "location": "Riyadh, Saudi Arabia", "description": "ETH Riyadh 2024 unites Middle Eastern developers and blockchain enthusiasts to explore and advance Ethereum technology. Join us for an exciting event that fosters collaboration and innovation in the blockchain ecosystem.", - "startDate": "12/1/2024", - "endDate": "12/3/2024", + "startDate": "2024-12-1", + "endDate": "2024-12-3", "imageUrl": "https://ethriyadh.com/banner.jpg" } ] From 3b8c72e0a04760a0e43f46425056274534c70217 Mon Sep 17 00:00:00 2001 From: Joshua <62268199+minimalsm@users.noreply.github.com> Date: Mon, 23 Sep 2024 17:10:50 +0100 Subject: [PATCH 045/129] Update src/data/community-events.json --- src/data/community-events.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/community-events.json b/src/data/community-events.json index 2d94605a86c..499b9944dff 100644 --- a/src/data/community-events.json +++ b/src/data/community-events.json @@ -647,7 +647,7 @@ "description": "Join the second edition of the event in the center of Venice, to learn more about Blockchain, Technology and with an eye towards art.", "startDate": "2024-12-02", "endDate": "2024-12-03", - "imageUrl": "https://www.ethvenice.com/images/logo.png" + "imageUrl": "https://ethvenice.com/images/banner.jpg" }, { "title": "ETH Riyadh 2024", From 636e983bac2c38e8f38e215653ad0acf157060b0 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Mon, 23 Sep 2024 16:11:17 +0000 Subject: [PATCH 046/129] docs: update README.md [skip ci] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 229775bb059..763720854c1 100644 --- a/README.md +++ b/README.md @@ -1909,6 +1909,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Mako Shan
Mako Shan
🖋 Christina
Christina
🖋 Nipun Hedaoo
Nipun Hedaoo
💻 + april
april
📖 From 4535cd5126763390c99b6ec6d2938bfe13cafda9 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Mon, 23 Sep 2024 16:11:18 +0000 Subject: [PATCH 047/129] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 5f412e70f8a..2c9ebe827d8 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -12488,6 +12488,15 @@ "contributions": [ "code" ] + }, + { + "login": "chenjiali-april", + "name": "april", + "avatar_url": "https://avatars.githubusercontent.com/u/132745538?v=4", + "profile": "https://github.com/chenjiali-april", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, From f4d3a49cef6cf90ab87c1537adbf7cd4df69ecc3 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 13:25:49 -0700 Subject: [PATCH 048/129] fix: update `next` values --- src/data/quizzes/index.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/data/quizzes/index.ts b/src/data/quizzes/index.ts index caa3ae9a330..5224d438e87 100644 --- a/src/data/quizzes/index.ts +++ b/src/data/quizzes/index.ts @@ -98,11 +98,12 @@ export const usingEthereumQuizzes: QuizzesSection[] = [ { id: "run-a-node", level: "intermediate", - next: "scaling", + next: "merge", }, - { + { id: "merge", level: "intermediate", + next: "scaling", }, { id: "scaling", From d589a914d3284ae1dd723eff355908ac1f8a9c1a Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 14:54:12 -0700 Subject: [PATCH 049/129] chore: rm TODOs, rearrange to match DS --- src/styles/semantic-tokens.css | 25 ++++++++++--------------- tailwind.config.ts | 3 --- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index 157c68032f7..ba62942497d 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -10,11 +10,15 @@ --body-light: var(--gray-200); --body-inverse: var(--white); + --body-menu: var(--gray-400); + --body-menu-low: var(--gray-400); + --body-menu-medium: var(--gray-500); + --body-menu-high: var(--gray-700); + --disabled: var(--gray-400); --background: var(--white); --background-highlight: var(--gray-50); - /* TODO: Add "low" "medium" and "high" to design system */ --background-low: var(--gray-100); --background-medium: var(--gray-200); --background-high: var(--gray-300); @@ -104,12 +108,6 @@ --shadow-window-box-3: 0px 32px 24px -6px hsla(var(--purple-800), var(--shadow-window-box-3-opacity)); --shadow-window-box-4: 0px 40px 40px -12px hsla(var(--purple-700), var(--shadow-window-box-4-opacity)); --shadow-window-box-5: 0px -64px 120px 80px hsla(var(--purple-100), var(--shadow-window-box-5-opacity)); - - /* Menu colors */ - --body-menu: var(--gray-400); - --body-menu-low: var(--gray-400); - --body-menu-medium: var(--gray-500); - --body-menu-high: var(--gray-700); } /* Dark mode token declarations */ @@ -119,12 +117,15 @@ --body-light: var(--gray-600); --body-inverse: var(--black); + --body-menu: var(--gray-400); + --body-menu-low: var(--gray-300); + --body-menu-medium: var(--gray-300); + --body-menu-high: var(--gray-300); + --disabled: var(--gray-500); --background: var(--black); --background-highlight: var(--gray-900); - - /* TODO: Add "low" "medium" and "high" to design system */ --background-low: var(--gray-700); --background-medium: var(--gray-600); --background-high: var(--gray-800); @@ -181,11 +182,5 @@ --shadow-window-box-3-opacity: 0.16; --shadow-window-box-4-opacity: 0.06; --shadow-window-box-5-opacity: 0.06; - - /* Menu colors */ - --body-menu: var(--gray-400); - --body-menu-low: var(--gray-300); - --body-menu-medium: var(--gray-300); - --body-menu-high: var(--gray-300); } } diff --git a/tailwind.config.ts b/tailwind.config.ts index a51767283f5..e1abb9da45c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -136,8 +136,6 @@ const config = { medium: "hsla(var(--body-medium))", light: "hsla(var(--body-light))", inverse: "hsla(var(--body-inverse))", - - // TODO: Add "body-menu" to design system menu: { DEFAULT: "hsla(var(--body-menu))", low: "hsla(var(--body-menu-low))", @@ -151,7 +149,6 @@ const config = { background: { DEFAULT: "hsla(var(--background))", highlight: "hsla(var(--background-highlight))", - // TODO : Add "low" "medium" and "high" to design system low: "hsla(var(--background-low))", medium: "hsla(var(--background-medium))", high: "hsla(var(--background-high))", From c83e6cefc24acad65e404f87476d9a24e68b2a9b Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 15:32:56 -0700 Subject: [PATCH 050/129] fix: LanguagePicker max height --- src/components/LanguagePicker/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx index b1c4b06e6df..903e8455933 100644 --- a/src/components/LanguagePicker/index.tsx +++ b/src/components/LanguagePicker/index.tsx @@ -125,7 +125,7 @@ const LanguagePickerMenu = ({ languages, onClose, onSelect }) => { return ( { const item = languages.find((name) => name.localeOption === value) @@ -157,7 +157,7 @@ const LanguagePickerMenu = ({ languages, onClose, onSelect }) => { kbdShortcut="\" /> - + From 140ec033bce1ab3205b032ed5587eb9fa39e1d75 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 16:07:02 -0700 Subject: [PATCH 051/129] refactor: export SwiperNavigation and SwiperSlide SwiperSlide imported from library and exported unchanged for convenience --- src/components/ui/swiper.tsx | 33 +++++++------- src/pages/index.tsx | 79 +++++++++++++++++++--------------- src/pages/what-is-ethereum.tsx | 78 ++++++++++++++++++--------------- 3 files changed, 105 insertions(+), 85 deletions(-) diff --git a/src/components/ui/swiper.tsx b/src/components/ui/swiper.tsx index 0b708cca209..a719c4f25f7 100644 --- a/src/components/ui/swiper.tsx +++ b/src/components/ui/swiper.tsx @@ -99,12 +99,20 @@ const SwiperNavContainer = React.forwardRef< )) SwiperNavContainer.displayName = "SwiperNavContainer" -type SwiperProps = SwiperReactProps & { - navigation?: React.ReactNode - children: React.ReactNode[] -} -const Swiper = React.forwardRef( - ({ children, navigation, ...props }, ref) => { +const SwiperNavigation = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>((props, ref) => ( + + + + + +)) +SwiperNavigation.displayName = "SwiperNavigation" + +const Swiper = React.forwardRef( + ({ children, ...props }, ref) => { const { t } = useTranslation("common") return ( ( slideClass="swiper-slide" {...props} > - {children.map((child, index) => ( - {child} - ))} - {navigation || ( - - - - - - )} + {children} ) } @@ -150,7 +149,9 @@ export { SwiperContainer, SwiperNavButton, SwiperNavContainer, + SwiperNavigation, SwiperNextButton, SwiperPaginationDots, SwiperPrevButton, + SwiperSlide, } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 971e26fbf60..f3b18d1b30a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -47,7 +47,12 @@ import { SectionTag, } from "@/components/ui/section" import { SkeletonLines } from "@/components/ui/skeleton" -import { Swiper, SwiperContainer } from "@/components/ui/swiper" +import { + Swiper, + SwiperContainer, + SwiperNavigation, + SwiperSlide, +} from "@/components/ui/swiper" import WindowBox from "@/components/WindowBox" import { cn } from "@/lib/utils/cn" @@ -283,14 +288,16 @@ const HomePage = ({ }} > {bentoItems.map(({ className, ...item }) => ( - + + + ))} + {/* Desktop */} @@ -675,34 +682,36 @@ const HomePage = ({ }} > {rssItems.map(({ pubDate, title, source, link, imgSrc }) => ( - - - {/* eslint-disable-next-line @next/next/no-img-element */} - - - - {title} - {isValidDate(pubDate) && ( - - {new Intl.DateTimeFormat(locale, { - month: "long", - day: "numeric", - year: "numeric", - }).format(new Date(pubDate))} - - )} - {source} - - + + + + {/* eslint-disable-next-line @next/next/no-img-element */} + + + + {title} + {isValidDate(pubDate) && ( + + {new Intl.DateTimeFormat(locale, { + month: "long", + day: "numeric", + year: "numeric", + }).format(new Date(pubDate))} + + )} + {source} + + + ))} + diff --git a/src/pages/what-is-ethereum.tsx b/src/pages/what-is-ethereum.tsx index 30994f07d19..13c028d27a7 100644 --- a/src/pages/what-is-ethereum.tsx +++ b/src/pages/what-is-ethereum.tsx @@ -36,7 +36,12 @@ import Translation from "@/components/Translation" import { Button, ButtonLink } from "@/components/ui/buttons/Button" import { Center, Flex, HStack, Stack, VStack } from "@/components/ui/flex" import InlineLink from "@/components/ui/Link" -import { Swiper, SwiperContainer } from "@/components/ui/swiper" +import { + Swiper, + SwiperContainer, + SwiperNavigation, + SwiperSlide, +} from "@/components/ui/swiper" import { cn } from "@/lib/utils/cn" import { existsNamespace } from "@/lib/utils/existsNamespace" @@ -167,10 +172,6 @@ const Image400 = ({ src }: Pick) => ( ) -const Slide = ({ children }: ChildOnlyProp) => ( -
{children}
-) - const cachedFetchTxCount = runOnlyOnce(fetchGrowThePie) type Props = BasePageProps & { @@ -419,39 +420,48 @@ 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-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-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-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")}

+ + +
+

{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 bd27a03ae871703545009254fc0d1b7a8be7d1b8 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 16:56:55 -0700 Subject: [PATCH 052/129] refactor: navigationPlacement variants Swiper React manipulates DOM limiting ability to allow Swiper elements to sit in-flow with the custom placement of a SwiperNavigation component (this component will be forced to the end of a `swiper-wrapper` element. Known limitation of Swiper React that this wrapper cannot be manipulated with `wrapperClass`. Alternatively, navigationPlacement variants added to at least enable positioning at bottom and top (default bottom) --- src/components/ui/swiper.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/ui/swiper.tsx b/src/components/ui/swiper.tsx index a719c4f25f7..9c6ef00a843 100644 --- a/src/components/ui/swiper.tsx +++ b/src/components/ui/swiper.tsx @@ -1,4 +1,5 @@ import * as React from "react" +import { cva, VariantProps } from "class-variance-authority" import { useTranslation } from "next-i18next" import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules" import { @@ -91,7 +92,7 @@ const SwiperNavContainer = React.forwardRef<
( - ({ children, ...props }, ref) => { +const variants = cva("!flex gap-y-6", { + variants: { + navigationPlacement: { + top: "flex-col-reverse", + bottom: "flex-col", + }, + }, + defaultVariants: { + navigationPlacement: "bottom", + }, +}) + +export type SwiperProps = SwiperReactProps & VariantProps +const Swiper = React.forwardRef( + ({ className, children, navigationPlacement, ...props }, ref) => { const { t } = useTranslation("common") return ( ( slidesPerGroup={1} lazyPreloadPrevNext={0} slideClass="swiper-slide" + className={cn(variants({ navigationPlacement, className }))} {...props} > {children} From 589072610c504d6f3776100645ff31a93ceb5b18 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 17:24:26 -0700 Subject: [PATCH 053/129] refactor: apply card shadow override as className --- src/pages/index.tsx | 1 + src/styles/global.css | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f3b18d1b30a..e0357f52d2b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -274,6 +274,7 @@ const HomePage = ({ className={cn( "lg:hidden", // Mobile only "[&_.swiper-slide]:overflow-visible [&_.swiper-slide]:rounded-2xl [&_.swiper-slide]:shadow-card-hover", + "[&_.swiper-slide-shadow]:!bg-transparent", "[&_.swiper]:mx-auto [&_.swiper]:mt-4 [&_.swiper]:!flex [&_.swiper]:h-fit [&_.swiper]:max-w-128 [&_.swiper]:flex-col [&_.swiper]:items-center" )} > diff --git a/src/styles/global.css b/src/styles/global.css index ec2602ccf89..5cfb431df5c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -167,10 +167,6 @@ } } -.swiper-slide-shadow { - background: transparent !important; -} - @layer utilities { .animate-pause { animation-play-state: paused; From 39e245df382ab3325f0be7ac31c98531380feca9 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 17:40:26 -0700 Subject: [PATCH 054/129] chore: typo fix --- .../staking/{AlllnodesGlyphIcon.tsx => AllnodesGlyphIcon.tsx} | 0 src/components/icons/staking/index.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/icons/staking/{AlllnodesGlyphIcon.tsx => AllnodesGlyphIcon.tsx} (100%) diff --git a/src/components/icons/staking/AlllnodesGlyphIcon.tsx b/src/components/icons/staking/AllnodesGlyphIcon.tsx similarity index 100% rename from src/components/icons/staking/AlllnodesGlyphIcon.tsx rename to src/components/icons/staking/AllnodesGlyphIcon.tsx diff --git a/src/components/icons/staking/index.ts b/src/components/icons/staking/index.ts index 4663d84f266..7b14e013d67 100644 --- a/src/components/icons/staking/index.ts +++ b/src/components/icons/staking/index.ts @@ -1,5 +1,5 @@ export * from "./AbyssGlyphIcon" -export * from "./AlllnodesGlyphIcon" +export * from "./AllnodesGlyphIcon" export * from "./AnkrGlyphIcon" export * from "./AuditedIcon" export * from "./AvadoGlyphIcon" From f5f8acdd38a01ecdffd321b7ab14c5cc7090b537 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toni=20Wahrst=C3=A4tter?= <51536394+nerolation@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:33:09 +0200 Subject: [PATCH 055/129] Update consensus-bounty-hunters.json --- src/data/consensus-bounty-hunters.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/consensus-bounty-hunters.json b/src/data/consensus-bounty-hunters.json index c2a39c82ef1..5aab9432f57 100644 --- a/src/data/consensus-bounty-hunters.json +++ b/src/data/consensus-bounty-hunters.json @@ -80,7 +80,7 @@ "score": 1750 }, { - "username": "@nerolation", + "username": "nerolation", "name": "Toni Wahrstätter", "score": 1000 }, From 7942f8ece9440d24029cca1656765a4299ed62cf Mon Sep 17 00:00:00 2001 From: Nuno Loureiro Date: Tue, 24 Sep 2024 14:33:48 +0100 Subject: [PATCH 056/129] quick fix to 16px for now --- src/styles/global.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/global.css b/src/styles/global.css index a29960df004..c1373b322b2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -76,7 +76,7 @@ @layer base { body { - @apply !bg-background font-body text-lg !text-body lg:text-md; + @apply !bg-background font-body text-md !text-body; } a { From a5a852d11b9fa35af8fd6042956fd407f214898a Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 24 Sep 2024 16:25:08 +0200 Subject: [PATCH 057/129] migrate docs layout to tailwind --- src/layouts/Docs.tsx | 83 +++++++------------------------------------- 1 file changed, 13 insertions(+), 70 deletions(-) diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx index a6d7d1d591f..630c85aaa97 100644 --- a/src/layouts/Docs.tsx +++ b/src/layouts/Docs.tsx @@ -1,16 +1,6 @@ import { useRouter } from "next/router" import type { HTMLAttributes } from "react" -import { - Badge, - Box, - type BoxProps, - Flex, - type FlexProps, - type ListProps, - OrderedList as ChakraOrderedList, - UnorderedList as ChakraUnorderedList, - useToken, -} from "@chakra-ui/react" +import { Badge } from "@chakra-ui/react" import { ChildOnlyProp } from "@/lib/types" import type { DocsFrontmatter, MdPageContent } from "@/lib/interfaces" @@ -27,14 +17,12 @@ import FeedbackCard from "@/components/FeedbackCard" import FileContributors from "@/components/FileContributors" import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip" import InfoBanner from "@/components/InfoBanner" -import Link from "@/components/Link" import MainArticle from "@/components/MainArticle" import { Heading1 as MdHeading1, Heading2 as MdHeading2, Heading3 as MdHeading3, Heading4 as MdHeading4, - Paragraph, } from "@/components/MdComponents" import RollupProductDevDoc from "@/components/RollupProductDevDoc" import SideNav from "@/components/SideNav" @@ -42,32 +30,20 @@ import SideNavMobile from "@/components/SideNavMobile" import TableOfContents from "@/components/TableOfContents" import Translation from "@/components/Translation" import { Divider } from "@/components/ui/divider" +import InlineLink from "@/components/ui/Link" import { mdxTableComponents } from "@/components/ui/Table" import YouTube from "@/components/YouTube" import { cn } from "@/lib/utils/cn" import { getEditPath } from "@/lib/utils/editPath" -const Page = (props: ChildOnlyProp & Pick) => ( - +const Page = (props: HTMLAttributes) => ( +
) -type ContentContainerProps = Pick - -const ContentContainer = (props: ContentContainerProps) => ( - ) => ( +
) @@ -101,51 +77,21 @@ const H4 = (props: HTMLAttributes) => ( ) -const UnorderedList = (props: ListProps) => ( - -) -const OrderedList = (props: ListProps) => ( - -) - -// Apply styles for classes within markdown here const Content = (props: ChildOnlyProp) => { - const mdBreakpoint = useToken("breakpoints", "md") - return ( - ) } const BackToTop = (props: ChildOnlyProp) => ( - - +
+ ↑ - - + +
) export const docsComponents = { @@ -153,9 +99,6 @@ export const docsComponents = { h2: H2, h3: H3, h4: H4, - p: Paragraph, - ul: UnorderedList, - ol: OrderedList, pre: Codeblock, ...mdxTableComponents, Badge, From 4afaa8a0091a14070c5a1c30959c29d1d4486639 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 24 Sep 2024 17:09:54 +0200 Subject: [PATCH 058/129] migrate tutorials layout to tailwind --- src/layouts/Tutorial.tsx | 128 ++++++++++++--------------------------- 1 file changed, 40 insertions(+), 88 deletions(-) diff --git a/src/layouts/Tutorial.tsx b/src/layouts/Tutorial.tsx index 087f9fe9492..923361d2559 100644 --- a/src/layouts/Tutorial.tsx +++ b/src/layouts/Tutorial.tsx @@ -1,15 +1,6 @@ import { useRouter } from "next/router" import type { HTMLAttributes } from "react" -import { - Badge, - Box, - type BoxProps, - Flex, - Kbd, - Text, - type TextProps, - useToken, -} from "@chakra-ui/react" +import { Badge } from "@chakra-ui/react" import type { ChildOnlyProp } from "@/lib/types" import type { MdPageContent, TutorialFrontmatter } from "@/lib/interfaces" @@ -22,7 +13,6 @@ import Emoji from "@/components/Emoji" import EnvWarningBanner from "@/components/EnvWarningBanner" import FeedbackCard from "@/components/FeedbackCard" import FileContributors from "@/components/FileContributors" -import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip" import InfoBanner from "@/components/InfoBanner" import MainArticle from "@/components/MainArticle" import { @@ -34,33 +24,16 @@ import { import TableOfContents from "@/components/TableOfContents" import TooltipLink from "@/components/TooltipLink" import TutorialMetadata from "@/components/TutorialMetadata" -import { Divider } from "@/components/ui/divider" import { mdxTableComponents } from "@/components/ui/Table" import YouTube from "@/components/YouTube" import { getEditPath } from "@/lib/utils/editPath" -type ContentContainerProps = Pick - -const ContentContainer = (props: ContentContainerProps) => { - const boxShadow = useToken("colors", "tableBoxShadow") - +const ContentContainer = (props: HTMLAttributes) => { return ( - ) } @@ -93,25 +66,16 @@ const Heading4 = (props: HTMLAttributes) => ( /> ) -const StyledDivider = (props) => - -const Paragraph = (props: TextProps) => ( - +const Paragraph = (props: HTMLAttributes) => ( +

) -const KBD = (props) => { - const borderColor = useToken("colors", "primary.base") - - return ( - - ) -} +const KBD = (props: HTMLAttributes) => ( + +) export const tutorialsComponents = { a: TooltipLink, @@ -129,9 +93,7 @@ export const tutorialsComponents = { Card, Emoji, EnvWarningBanner, - GlossaryTooltip, InfoBanner, - StyledDivider, YouTube, } type TutorialLayoutProps = ChildOnlyProp & @@ -153,44 +115,34 @@ export const TutorialLayout = ({ const { asPath: relativePath } = useRouter() const absoluteEditPath = getEditPath(relativePath) - const borderColor = useToken("colors", "border") - return ( - <> - - - {frontmatter.title} - - - {children} - - - - {tocItems && ( - - )} - - +

+ + {frontmatter.title} + + + {children} + + + + {tocItems && ( + + )} +
) } From c8bce767281e93a72a829e5d0e53fa3bab17665b Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 24 Sep 2024 18:03:16 +0200 Subject: [PATCH 059/129] Apply suggestions from code review Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com> --- src/pages/get-eth.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx index 0166f266a7a..a6fa46865a1 100644 --- a/src/pages/get-eth.tsx +++ b/src/pages/get-eth.tsx @@ -288,7 +288,7 @@ const GetEthPage = ({

{t("page-get-eth-dexs-desc-3")}

{t("page-get-eth-need-wallet")}

- + {t("page-get-eth-get-wallet-btn")} @@ -351,7 +351,7 @@ const GetEthPage = ({

0x0125e2478d69eXaMpLe81766fef5c120d30fb53f

-

+

{t("page-get-eth-do-not-copy")}

From bee765c69acbead6caebe339e5502bb915461709 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 24 Sep 2024 18:35:14 +0200 Subject: [PATCH 060/129] replace InfoBanners with Alerts --- src/pages/get-eth.tsx | 41 ++++++++++++++++++++++++++++------------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx index bc58438b5ae..3dc28ac2ebf 100644 --- a/src/pages/get-eth.tsx +++ b/src/pages/get-eth.tsx @@ -14,10 +14,10 @@ import Emoji from "@/components/Emoji" import EthPriceCard from "@/components/EthPriceCard" import FeedbackCard from "@/components/FeedbackCard" import { TwImage as Image } from "@/components/Image" -import InfoBanner from "@/components/InfoBanner" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" import Translation from "@/components/Translation" +import { Alert, AlertContent, AlertDescription } from "@/components/ui/alert" import { ButtonLink } from "@/components/ui/buttons/Button" import { Card, @@ -246,7 +246,7 @@ const GetEthPage = ({
-
+

{t("common:listing-policy-disclaimer")}{" "} @@ -255,13 +255,18 @@ const GetEthPage = ({

- - {t("page-get-eth-new-to-eth")}{" "} - - {t("page-get-eth-whats-eth-link")} - - -
+ + + + + {t("page-get-eth-new-to-eth")}{" "} + + {t("page-get-eth-whats-eth-link")} + + + + +
{t("page-get-eth-get-wallet-btn")} - - - + + + + + + + @@ -302,7 +311,13 @@ const GetEthPage = ({

{t("page-get-eth-swapping")}

- {t("page-get-eth-warning")} + + + + + + + From 44453a3ca09e001ebebc7fb0b8a0a2c09fefff13 Mon Sep 17 00:00:00 2001 From: Shiva-Sai-ssb <112751524+Shiva-Sai-ssb@users.noreply.github.com> Date: Tue, 24 Sep 2024 22:09:04 +0530 Subject: [PATCH 061/129] remove augur from Dapps page --- public/images/dapps/augur.png | Bin 1233 -> 0 bytes src/intl/en/page-dapps.json | 6 ++---- src/pages/dapps.tsx | 8 -------- 3 files changed, 2 insertions(+), 12 deletions(-) delete mode 100644 public/images/dapps/augur.png diff --git a/public/images/dapps/augur.png b/public/images/dapps/augur.png deleted file mode 100644 index b182acaecb276d46c8c4bc045e323676135c1aa3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1233 zcmV;?1TOoDP)005u}0{{R3yb+fl0000yP)t-s4h|t6 zB{b^l>t$te1_BoQ`}`~OumAu5DdwjP3?D;7Q67+S6huOyp{W^aS|-n#BeRIWz{P}w zj@H)M$|0ec00009a7bBm000XU000XU0RWnu7ytkSJ4r-ARCt{2THCgxDiB0Pv0}1w z`~QEP1yKWviiF!atLrJVS8R%+tGk247=b__5C{YUfj}S-2m}J*e*joNmIE;G5h#%% z7}(#S@TdM!9Kaskh)0q1_+QtL=>B+V5`v++PyG7+UX^ypV0@Sb?E7vgOhPbz?G0QD zW61E(1nm35d;;Ae1^NW0Lq?wzR19G{q&S~o<&ffh0@ERd`2=f+6y_7KyVm41veGAo zIi!0)JMJQU0)|RA25{BRyNH$yQ?iAig*l`GGZgLeml_xj;SAgS#>SMA#5UEgim&Oz|K51zs-{@#V1D3;QRe0J$6+> z2|h9E@vxw?bUJvX`bY`8h3()izQwbU!>~@riT#Bb!fLg+UgdoG8IKD(7+doiHb|_~hKN zA^qHi?-bA^efFc7| zB0AY}^htNWrh5qr_7QQs>Nx)TqwA%737fGJad4YL!Ehavd?^PSc?aWqWRP#V)5s^+ zfaUW6#tV`8b2O?_3WFhBpVJ@W(Hb5YuP#63666*yRV0RzUoBogxDnF*FHy&0$oNgP z;w?q=Spd>km$zueElNuU;}_Aktq?aa5y2R*ZbF5)M3E4XyBBRM>IPo=HMLL?#5+Ps z1mlg2F4P*0$06}X%mJF<63U)mkMTbX_z-NT=j-5CA^13CjQ{jI;^#NQEwF^jAz%0; zIerhZAOGj=K%ySoY)h^ z^J6tW!}KChkjYi%;M0gaiRexd<1oF5@(h!M@;GJcn8DAC)tH89ErLqsK)pm|&q72w zRy&FaDc?9u8}fy_t5H8@o3)6Qi->ml>L%=EgZC;>d#jgwdphmyEJKflAU9^qjtF-( z8=2nhlx_Kl&0oRgo0n6aYMJbptz@^EONh6tx%?<{W+@lUrpVmc{L7OE!*#zB_TIPm z&8RnpbIURpel2vdYyH#BlQYAO%(`gOY;-oSA;X8_kvFl`*^*tOZ&o)bg%g$LBZd|d zH%TH%XLF-y=fShf_ho3MlB%(Y9e$3MQ5_h)Ky|2wvnqA9wo3Avxz3CFg$!CgKq { image: polymarket, alt: t("page-dapps-polymarket-logo-alt"), }, - { - title: "Augur", - description: t("page-dapps-dapp-description-augur"), - link: "https://augur.net", - image: augur, - alt: t("page-dapps-augur-logo-alt"), - }, { title: "Synthetix", description: t("page-dapps-dapp-description-synthetix"), From 832017d3efb899fa65e86fb2f7d9e90e4cb9ae30 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 24 Sep 2024 18:42:55 +0200 Subject: [PATCH 062/129] remove radial gradient and use new one --- src/pages/get-eth.tsx | 6 +++++- src/styles/global.css | 12 ------------ tailwind.config.ts | 1 - 3 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx index 3dc28ac2ebf..5c224abc8bc 100644 --- a/src/pages/get-eth.tsx +++ b/src/pages/get-eth.tsx @@ -30,6 +30,7 @@ import { Divider } from "@/components/ui/divider" import { Stack } from "@/components/ui/flex" import InlineLink from "@/components/ui/Link" +import { cn } from "@/lib/utils/cn" import { existsNamespace } from "@/lib/utils/existsNamespace" import { getLastDeployDate } from "@/lib/utils/getLastDeployDate" import { getLastModifiedDateByPath } from "@/lib/utils/gh" @@ -270,7 +271,10 @@ const GetEthPage = ({
diff --git a/src/styles/global.css b/src/styles/global.css index c36565788d6..70f99451df2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -23,12 +23,6 @@ rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100% ); - --radial-gradient: radial-gradient( - 46.28% 66.31% at 66.95% 58.35%, - rgba(127, 127, 213, 0.2) 0%, - rgba(134, 168, 231, 0.2) 50%, - rgba(145, 234, 228, 0.2) 100% - ); --feedback-gradient: var(--gradient-main); --table-box-shadow: 0 14px 66px rgba(0, 0, 0, 0.07), 0 10px 17px rgba(0, 0, 0, 0.03), 0 4px 7px rgba(0, 0, 0, 0.05); @@ -62,12 +56,6 @@ rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100% ); - --radial-gradient: radial-gradient( - 46.28% 66.31% at 66.95% 58.35%, - rgba(127, 127, 213, 0.2) 0%, - rgba(134, 168, 231, 0.2) 50%, - rgba(145, 234, 228, 0.2) 100% - ); --feedback-gradient: linear-gradient( 83.46deg, #2c2c32 7.03%, diff --git a/tailwind.config.ts b/tailwind.config.ts index bb90d11129e..73509724feb 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -212,7 +212,6 @@ const config = { "banner-grid-gradient": "var(--banner-grid-gradient)", "radial-a": "var(--radial-a)", "linear-bug-bounty-title": "var(--linear-bug-bounty-title)", - "radial-gradient": "var(--radial-gradient)", }, boxShadow: { "table-box": "var(--table-box-shadow)", From be880e34cc86061a045ee6b401359a1e1c24321f Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 24 Sep 2024 19:12:25 +0200 Subject: [PATCH 063/129] migrate to tailwind --- .../Banners/BugBountyBanner/index.tsx | 6 ++--- .../Banners/UpgradeBannerNotification.tsx | 8 +++---- src/components/CopyToClipboard.tsx | 15 ++++++------ src/components/EnvWarningBanner.tsx | 5 ++-- src/components/EthVideo.tsx | 7 +++--- src/components/FeaturedText/index.tsx | 11 ++------- src/components/IdAnchor.tsx | 3 +-- src/components/LearningToolsCardGrid.tsx | 9 ++----- src/components/MarkdownImage.tsx | 24 +++++++++++-------- src/components/MergeArticleList.tsx | 5 ++-- src/components/StatErrorMessage.tsx | 14 +++++++---- .../TranslationChartImage/index.tsx | 3 +-- src/components/YouTube.tsx | 5 ++-- src/pages/what-is-ethereum.tsx | 2 +- 14 files changed, 53 insertions(+), 64 deletions(-) diff --git a/src/components/Banners/BugBountyBanner/index.tsx b/src/components/Banners/BugBountyBanner/index.tsx index ac5b4c0a23e..14342c2c21e 100644 --- a/src/components/Banners/BugBountyBanner/index.tsx +++ b/src/components/Banners/BugBountyBanner/index.tsx @@ -1,17 +1,17 @@ // Libraries import React from "react" -import { Center, Text } from "@chakra-ui/react" // Components import BannerNotification from "@/components/Banners/BannerNotification" +import { Center } from "@/components/ui/flex" const BugBountyBanner = () => (
- +

All Dencun-related bounties currently receive a 2x bonus multiplier (up to 500,000 USD) up to two weeks before the scheduled mainnet hardfork. - +

) diff --git a/src/components/Banners/UpgradeBannerNotification.tsx b/src/components/Banners/UpgradeBannerNotification.tsx index bd1e6928bcf..a4098ff89b1 100644 --- a/src/components/Banners/UpgradeBannerNotification.tsx +++ b/src/components/Banners/UpgradeBannerNotification.tsx @@ -1,14 +1,12 @@ -import { Box } from "@chakra-ui/react" - import Emoji from "../Emoji" -import InlineLink from "../Link" +import InlineLink from "../ui/Link" import BannerNotification from "./BannerNotification" const UpgradeBannerNotification = () => ( - +
We've deprecated our use of 'Eth1' and 'Eth2' terms. @@ -16,7 +14,7 @@ const UpgradeBannerNotification = () => ( Read the full announcement - +
) diff --git a/src/components/CopyToClipboard.tsx b/src/components/CopyToClipboard.tsx index 52b768c09d3..bcf61df9432 100644 --- a/src/components/CopyToClipboard.tsx +++ b/src/components/CopyToClipboard.tsx @@ -1,4 +1,6 @@ -import { Box, useClipboard } from "@chakra-ui/react" +import { cn } from "@/lib/utils/cn" + +import { useClipboard } from "@/hooks/useClipboard" export type CopyToClipboardProps = { text: string @@ -11,16 +13,15 @@ const CopyToClipboard = ({ text, inline = false, }: CopyToClipboardProps) => { - const { onCopy, hasCopied } = useClipboard(text, { timeout: 1500 }) + const { onCopy, hasCopied } = useClipboard({ timeout: 1500 }) return ( - onCopy(text)} > {children(hasCopied)} - +
) } diff --git a/src/components/EnvWarningBanner.tsx b/src/components/EnvWarningBanner.tsx index 6a67d95fb3b..ad1c303d181 100644 --- a/src/components/EnvWarningBanner.tsx +++ b/src/components/EnvWarningBanner.tsx @@ -1,11 +1,10 @@ import React from "react" -import { FlexProps } from "@chakra-ui/react" import InfoBanner from "./InfoBanner" import Translation from "./Translation" -const EnvWarningBanner = ({ ...flexProps }: FlexProps) => ( - +const EnvWarningBanner = () => ( + ) diff --git a/src/components/EthVideo.tsx b/src/components/EthVideo.tsx index 6e01cf46cb1..66f477b33c9 100644 --- a/src/components/EthVideo.tsx +++ b/src/components/EthVideo.tsx @@ -1,5 +1,4 @@ -import { Box } from "@chakra-ui/react" -import { useColorModeValue } from "@chakra-ui/react" +import useColorModeValue from "@/hooks/useColorModeValue" const EthVideo = () => { const src = useColorModeValue( @@ -8,7 +7,7 @@ const EthVideo = () => { ) return ( - +
) } diff --git a/src/components/FeaturedText/index.tsx b/src/components/FeaturedText/index.tsx index 754c407e58b..ec73d713b4e 100644 --- a/src/components/FeaturedText/index.tsx +++ b/src/components/FeaturedText/index.tsx @@ -1,17 +1,10 @@ -import { Box } from "@chakra-ui/react" - import type { ChildOnlyProp } from "@/lib/types" function FeaturedText({ children }: ChildOnlyProp) { return ( - +
{children} - +
) } diff --git a/src/components/IdAnchor.tsx b/src/components/IdAnchor.tsx index 72569a8bed2..44682401ba6 100644 --- a/src/components/IdAnchor.tsx +++ b/src/components/IdAnchor.tsx @@ -1,5 +1,4 @@ import { CiLink } from "react-icons/ci" -import { Icon } from "@chakra-ui/react" import Link from "@/components/Link" @@ -16,7 +15,7 @@ const IdAnchor = ({ id }: { id?: string }) => { _focus={{ opacity: 1 }} transition="opacity 0.1s ease-in-out" > - + ) } diff --git a/src/components/LearningToolsCardGrid.tsx b/src/components/LearningToolsCardGrid.tsx index 28165f156bf..747579abdfd 100644 --- a/src/components/LearningToolsCardGrid.tsx +++ b/src/components/LearningToolsCardGrid.tsx @@ -1,5 +1,4 @@ import React from "react" -import { Grid } from "@chakra-ui/react" import { LearningToolsCardGridProps } from "@/lib/types" @@ -8,11 +7,7 @@ import Translation from "./Translation" const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => { return ( - +
{category .sort(({ locales }) => (locales?.length ? -1 : 0)) .map(({ name, description, background, url, alt, image, subjects }) => ( @@ -28,7 +23,7 @@ const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => { ))} - +
) } diff --git a/src/components/MarkdownImage.tsx b/src/components/MarkdownImage.tsx index 31b8528c5c0..28eb16ac05b 100644 --- a/src/components/MarkdownImage.tsx +++ b/src/components/MarkdownImage.tsx @@ -1,14 +1,13 @@ import { extname } from "path" -import { Flex } from "@chakra-ui/react" - -import { Image, type ImageProps } from "@/components/Image" -import Link from "@/components/Link" +import { type ImageProps, TwImage } from "@/components/Image" import { toPosixPath } from "@/lib/utils/relativePath" import { CONTENT_IMAGES_MAX_WIDTH } from "@/lib/constants" +import InlineLink from "./ui/Link" + interface MarkdownImageProps extends Omit { width: string height: string @@ -42,20 +41,25 @@ const MarkdownImage = ({ return ( // display the wrapper as a `span` to avoid dom nesting warnings as mdx // sometimes wraps images in `p` tags - - - + + - - + + ) } diff --git a/src/components/MergeArticleList.tsx b/src/components/MergeArticleList.tsx index 7408c027615..10b3f03dfae 100644 --- a/src/components/MergeArticleList.tsx +++ b/src/components/MergeArticleList.tsx @@ -1,5 +1,4 @@ import { useTranslation } from "next-i18next" -import { Box } from "@chakra-ui/react" import CardList, { type CardListItem } from "@/components/CardList" @@ -78,9 +77,9 @@ const MergeArticleList = () => { ] return ( - +
- +
) } diff --git a/src/components/StatErrorMessage.tsx b/src/components/StatErrorMessage.tsx index 58f7797554f..2dd5eebb856 100644 --- a/src/components/StatErrorMessage.tsx +++ b/src/components/StatErrorMessage.tsx @@ -1,12 +1,16 @@ -import type { TextProps } from "@chakra-ui/react" +import { HTMLAttributes } from "react" + +import { cn } from "@/lib/utils/cn" -import Text from "./OldText" import Translation from "./Translation" -const StatErrorMessage = (props: TextProps) => ( - +const StatErrorMessage = ({ + className, + ...props +}: HTMLAttributes) => ( + - + ) export default StatErrorMessage diff --git a/src/components/TranslationChartImage/index.tsx b/src/components/TranslationChartImage/index.tsx index f819899b6b8..d7d5f8e07b7 100644 --- a/src/components/TranslationChartImage/index.tsx +++ b/src/components/TranslationChartImage/index.tsx @@ -1,7 +1,6 @@ -import { useColorModeValue } from "@chakra-ui/react" - import { TwImage } from "@/components/Image" +import useColorModeValue from "@/hooks/useColorModeValue" import pageviewsDark from "@/public/images/translation-program/pageviews-dark.png" import pageviewsLight from "@/public/images/translation-program/pageviews-light.png" diff --git a/src/components/YouTube.tsx b/src/components/YouTube.tsx index 1eb42ff7ba9..52b2e92405f 100644 --- a/src/components/YouTube.tsx +++ b/src/components/YouTube.tsx @@ -1,6 +1,5 @@ import React from "react" import LiteYouTubeEmbed from "react-lite-youtube-embed" -import { Box } from "@chakra-ui/react" import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css" @@ -24,7 +23,7 @@ const YouTube = ({ id, start = "0", title = "YouTube" }: YouTubeProps) => { const params = new URLSearchParams() ;+start > 0 && params.set("start", start) return ( - +
{ params={params.toString()} noCookie /> - +
) } diff --git a/src/pages/what-is-ethereum.tsx b/src/pages/what-is-ethereum.tsx index 13c028d27a7..aeedb756871 100644 --- a/src/pages/what-is-ethereum.tsx +++ b/src/pages/what-is-ethereum.tsx @@ -601,7 +601,7 @@ const WhatIsEthereumPage = ({ - {txStat || } + {txStat || } {/* TODO: Extract strings for translation */} From 62baba15c99e5750a647d9b87d437abce97a1489 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:11:19 -0700 Subject: [PATCH 064/129] chore: remove unused token --- src/styles/semantic-tokens.css | 3 --- tailwind.config.ts | 1 - 2 files changed, 4 deletions(-) diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index ba62942497d..2cffe778d02 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -35,7 +35,6 @@ --accent-a: var(--blue-600); --accent-a-hover: var(--blue-500); - --accent-a-low-contrast: var(--blue-50); /* TODO: VERIFY */ --accent-b: var(--pink-600); --accent-b-hover: var(--pink-500); @@ -137,11 +136,9 @@ --primary-low-contrast: var(--purple-900); --primary-hover: var(--purple-300); --primary-visited: var(--purple-500); - /* TODO: hover same as action in dark mode: */ --accent-a: var(--blue-400); --accent-a-hover: var(--blue-300); - --accent-a-low-contrast: var(--blue-900); /* TODO: VERIFY */ --accent-b: var(--pink-400); --accent-b-hover: var(--pink-300); diff --git a/tailwind.config.ts b/tailwind.config.ts index 73509724feb..2b37f72ea16 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -170,7 +170,6 @@ const config = { a: { DEFAULT: "hsla(var(--accent-a))", hover: "hsla(var(--accent-a-hover))", - "low-contrast": "hsla(var(--accent-a-low-contrast))", // TODO: VERIFY }, b: { DEFAULT: "hsla(var(--accent-b))", From 8e9398cf45419c4b4bf7250da72f87b47f553cf1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 12:35:22 -0700 Subject: [PATCH 065/129] chore: remove default class `text-md` = 16px = default font size --- src/styles/global.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/global.css b/src/styles/global.css index c1373b322b2..74c29f7455a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -76,7 +76,7 @@ @layer base { body { - @apply !bg-background font-body text-md !text-body; + @apply !bg-background font-body !text-body; } a { From 5b7a31857169d3582520482142eb0db75a4b5152 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 12:59:28 -0700 Subject: [PATCH 066/129] theme: use 16px font for alert descriptions --- src/components/ui/alert.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx index f1a5dc3c1b7..4e9add817fc 100644 --- a/src/components/ui/alert.tsx +++ b/src/components/ui/alert.tsx @@ -67,7 +67,7 @@ const AlertDescription = React.forwardRef< >(({ className, ...props }, ref) => (
)) From f7588284b401fed460d42876c2942663f56cadfe Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 13:17:09 -0700 Subject: [PATCH 067/129] matomo: add "popular topics" events --- src/components/Homepage/useHome.ts | 5 ++++ src/pages/index.tsx | 37 ++++++++++++++++++------------ 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/src/components/Homepage/useHome.ts b/src/components/Homepage/useHome.ts index 9129d29e14a..a5a002ce016 100644 --- a/src/components/Homepage/useHome.ts +++ b/src/components/Homepage/useHome.ts @@ -127,28 +127,33 @@ export const useHome = () => { label: t("page-index:page-index-popular-topics-ethereum"), Svg: EthTokenIcon, href: "/what-is-ethereum/", + eventName: "ethereum", }, { label: t("page-index:page-index-popular-topics-wallets"), Svg: PickWalletIcon, href: "/wallets/", + eventName: "wallets", }, { label: t("page-index:page-index-popular-topics-start"), Svg: BlockHeap, href: "/guides/", + eventName: "start guides", }, { label: t("page-index:page-index-popular-topics-whitepaper"), Svg: Whitepaper, className: cn(isRtl && "[&_svg]:-scale-x-100"), href: "/whitepaper/", + eventName: "whitepaper", }, { label: t("page-index:page-index-popular-topics-roadmap"), Svg: RoadmapSign, className: cn(isRtl && "[&_svg]:-scale-x-100"), href: "/roadmap/", + eventName: "roadmap", }, ] diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e0357f52d2b..fcbe892bf40 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -357,21 +357,28 @@ const HomePage = ({ {t("page-index:page-index-popular-topics-header")}
- {popularTopics.map(({ label, Svg, href, className }) => ( - :first-child]:flex-row", - className - )} - > -

- {label} -

- - ))} + {popularTopics.map( + ({ label, Svg, href, eventName, className }) => ( + :first-child]:flex-row", + className + )} + customEventOptions={{ + eventCategory: "Homepage", + eventAction: "popular topics", + eventName, + }} + > +

+ {label} +

+ + ) + )}
Date: Tue, 24 Sep 2024 13:53:02 -0700 Subject: [PATCH 068/129] fix(matomo): add locale to event category name Break Homepage metrics into per-locale dashboards --- src/components/Homepage/BentoCard.tsx | 4 ++- src/components/Homepage/ValuesMarquee.tsx | 8 +++-- src/components/Homepage/useHome.ts | 3 ++ src/components/Homepage/useValuesMarquee.ts | 6 +++- src/pages/index.tsx | 35 +++++++++++---------- 5 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/Homepage/BentoCard.tsx b/src/components/Homepage/BentoCard.tsx index 8dff25a23c1..ff212f3cdac 100644 --- a/src/components/Homepage/BentoCard.tsx +++ b/src/components/Homepage/BentoCard.tsx @@ -18,6 +18,7 @@ export type BentoCardProps = HTMLAttributes & { imgHeight?: number title: string eventName: string + eventCategory: string } const BentoCard = ({ @@ -30,6 +31,7 @@ const BentoCard = ({ imgHeight, title, eventName, + eventCategory, }: BentoCardProps) => ( & { separatorClass: string container?: HTMLElement | null label: string + eventCategory: string } const Item = ({ @@ -34,13 +35,14 @@ const Item = ({ separatorClass, container, label, + eventCategory, }: ItemProps) => ( <> { trackCustomEvent({ - eventCategory: "Homepage", + eventCategory, eventAction: "internet_changing", eventName: label, }) @@ -138,7 +140,7 @@ const Row = forwardRef( Row.displayName = "Row" const ValuesMarquee = () => { - const { t, pairings } = useValuesMarquee() + const { t, pairings, eventCategory } = useValuesMarquee() const containerFirstRef = useRef(null) const containerSecondRef = useRef(null) @@ -182,6 +184,7 @@ const ValuesMarquee = () => { pairing={pairing} separatorClass="bg-accent-a" className="group/item bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700" + eventCategory={eventCategory} > {pairing.ethereum.label} @@ -202,6 +205,7 @@ const ValuesMarquee = () => { pairing={pairing} className="bg-gray-200/20 text-body-medium hover:bg-gray-600 hover:text-white dark:bg-gray-950 dark:text-body" separatorClass="bg-gray-200 dark:bg-gray-950" + eventCategory={eventCategory} > {pairing.legacy.label} diff --git a/src/components/Homepage/useHome.ts b/src/components/Homepage/useHome.ts index a5a002ce016..09f75ed791a 100644 --- a/src/components/Homepage/useHome.ts +++ b/src/components/Homepage/useHome.ts @@ -40,6 +40,8 @@ export const useHome = () => { const { direction, isRtl } = useRtlFlip() + const eventCategory = `Homepage - ${locale}` + const toggleCodeExample = (id: number): void => { setActiveCode(id) setModalOpen(true) @@ -222,5 +224,6 @@ export const useHome = () => { upcomingEvents, joinActions, bentoItems, + eventCategory, } } diff --git a/src/components/Homepage/useValuesMarquee.ts b/src/components/Homepage/useValuesMarquee.ts index 26e6f2b965f..2189c924471 100644 --- a/src/components/Homepage/useValuesMarquee.ts +++ b/src/components/Homepage/useValuesMarquee.ts @@ -1,3 +1,4 @@ +import { useRouter } from "next/router" import { useTranslation } from "next-i18next" type Item = { @@ -12,6 +13,7 @@ export type Pairing = { export const useValuesMarquee = () => { const { t } = useTranslation("page-index") + const { locale } = useRouter() const pairings: Pairing[] = [ { legacy: { @@ -94,5 +96,7 @@ export const useValuesMarquee = () => { }, ] - return { t, pairings } + const eventCategory = `Homepage - ${locale}` + + return { t, pairings, eventCategory } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fcbe892bf40..8056dfba0f1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -198,6 +198,7 @@ const HomePage = ({ upcomingEvents, joinActions, bentoItems, + eventCategory, } = useHome() const { onCopy, hasCopied } = useClipboard() @@ -225,7 +226,7 @@ const HomePage = ({ href={href} label={label} customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "Top 4 CTAs", eventName: subHeroCTAs[idx].eventName, }} @@ -282,7 +283,7 @@ const HomePage = ({ effect="cards" onSlideChange={({ activeIndex }) => { trackCustomEvent({ - eventCategory: "Homepage", + eventCategory, eventAction: "mobile use cases", eventName: `swipe to card ${activeIndex + 1}`, }) @@ -295,6 +296,7 @@ const HomePage = ({ {...item} className={cn(className, "bg-background text-body")} imgWidth={undefined} // Intentionally last to override box + eventCategory={eventCategory} /> ))} @@ -307,6 +309,7 @@ const HomePage = ({ key={item.title} {...item} className={cn(className, "max-lg:hidden")} // Desktop only + eventCategory={eventCategory} /> ))} @@ -368,7 +371,7 @@ const HomePage = ({ className )} customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "popular topics", eventName, }} @@ -388,7 +391,7 @@ const HomePage = ({ isSecondary className="max-sm:self-start" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "learn", eventName: "learn", }} @@ -425,7 +428,7 @@ const HomePage = ({ size="lg" className="w-fit" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "builders", eventName: "developers", }} @@ -440,7 +443,7 @@ const HomePage = ({ isSecondary className="w-fit" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "builders", eventName: "dev docs", }} @@ -466,7 +469,7 @@ const HomePage = ({ onClick={() => { toggleCodeExample(idx) trackCustomEvent({ - eventCategory: "Homepage", + eventCategory, eventAction: "Code Examples", eventName, }) @@ -570,7 +573,7 @@ const HomePage = ({ href="/community/" size="lg" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "community", eventName: "community", }} @@ -585,7 +588,7 @@ const HomePage = ({ isSecondary hideArrow customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "community", eventName: "discord", }} @@ -599,7 +602,7 @@ const HomePage = ({ isSecondary hideArrow customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "community", eventName: "github", }} @@ -616,7 +619,7 @@ const HomePage = ({ {calendar.length > 0 ? ( calendar.map(({ date, title, calendarLink }) => { const customEventOptions = { - eventCategory: "Homepage", + eventCategory, eventAction: "Community Events Widget", eventName: "upcoming", } @@ -694,7 +697,7 @@ const HomePage = ({ Date: Tue, 24 Sep 2024 15:42:05 -0700 Subject: [PATCH 069/129] fix: QuizRadioGroup colors partial tailwind migration to fix colors --- .../Quiz/QuizWidget/QuizRadioGroup.tsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/Quiz/QuizWidget/QuizRadioGroup.tsx b/src/components/Quiz/QuizWidget/QuizRadioGroup.tsx index c30a45b7ec3..9569c40ecf7 100644 --- a/src/components/Quiz/QuizWidget/QuizRadioGroup.tsx +++ b/src/components/Quiz/QuizWidget/QuizRadioGroup.tsx @@ -4,7 +4,6 @@ import { Box, chakra, ChakraProps, - Circle, HStack, Stack, Text, @@ -22,6 +21,8 @@ import type { TranslationKey, } from "@/lib/types" +import { cn } from "@/lib/utils/cn" + import type { AnswerStatus } from "./useQuizWidget" type QuizRadioGroupProps = { @@ -157,11 +158,6 @@ const CustomRadio = ({ const getAnswerColor = (): ChakraProps["bg"] => isSelectedCorrect ? "success.base" : "error.base" - const controlFocusProps: ChakraProps = { - bg: isAnswerVisible ? "white" : "primary.pressed", - color: isAnswerVisible ? getAnswerColor() : undefined, - } - const radioInputProps = getInputProps({ id: INPUT_ID }) return ( @@ -188,22 +184,24 @@ const CustomRadio = ({ outline: isAnswerVisible ? "none" : `1px solid ${primaryBaseColor}`, }} _checked={{ - bg: !isAnswerVisible ? "primary.base" : getAnswerColor(), + bg: !isAnswerVisible ? "primary.action" : getAnswerColor(), color: "white", }} data-group + className="group" > - - +

{String.fromCharCode(97 + index).toUpperCase()} - - +

+
{label} From f3424a4d8d6787991f3b79d7fccb269bec18e54f Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 17:18:39 -0700 Subject: [PATCH 070/129] refactor: migrate to tw and latest theming --- .../icons/eth-token-icon-grayscale.svg | 5 ++ .../Simulator/icons/qr-code-icon.svg | 22 +++++ .../screens/SendReceive/SendFromContacts.tsx | 86 ++++++------------- 3 files changed, 52 insertions(+), 61 deletions(-) create mode 100644 src/components/Simulator/icons/eth-token-icon-grayscale.svg create mode 100644 src/components/Simulator/icons/qr-code-icon.svg diff --git a/src/components/Simulator/icons/eth-token-icon-grayscale.svg b/src/components/Simulator/icons/eth-token-icon-grayscale.svg new file mode 100644 index 00000000000..83ef4fe9106 --- /dev/null +++ b/src/components/Simulator/icons/eth-token-icon-grayscale.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Simulator/icons/qr-code-icon.svg b/src/components/Simulator/icons/qr-code-icon.svg new file mode 100644 index 00000000000..bb68a82046a --- /dev/null +++ b/src/components/Simulator/icons/qr-code-icon.svg @@ -0,0 +1,22 @@ + + , + , + , + , + , + , + , + , + \ No newline at end of file diff --git a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx index 4c2dbac303a..c1e3fc91f5f 100644 --- a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx +++ b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx @@ -1,10 +1,12 @@ -import React from "react" import { PiMagnifyingGlass } from "react-icons/pi" -import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react" -import { SimulatorNavProps } from "@/lib/types" +import type { SimulatorNavProps } from "@/lib/types" + +import EthTokenIconGrayscale from "@/components/Simulator/icons/eth-token-icon-grayscale.svg" +import QrCodeIcon from "@/components/Simulator/icons/qr-code-icon.svg" +import { Button } from "@/components/ui/buttons/Button" +import { Stack } from "@/components/ui/flex" -import { EthTokenIconGrayscale, QrCodeIcon } from "../../icons" import { NotificationPopover } from "../../NotificationPopover" import { CategoryTabs } from "../../WalletHome/CategoryTabs" @@ -23,85 +25,47 @@ export const SendFromContacts = ({ } return ( <> - - - Choose recipient - +
+

Choose recipient

- - +
+
- + {CONTACTS.map(({ name, lastAction }, i) => ( ))} - - + +
) } From efd5743360cfd2649175e74c2c55948f8dcbf7a8 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 18:04:21 -0700 Subject: [PATCH 071/129] refactor: ReceiveEther.tsx to tailwind migrate qr-code pngs --- public/images/qr-code-ethereum-org-dark.png | Bin 15390 -> 0 bytes public/images/qr-code-ethereum-org-light.png | Bin 18301 -> 0 bytes public/images/qr-code-ethereum-org.png | Bin 0 -> 9313 bytes .../screens/SendReceive/ReceiveEther.tsx | 141 ++++++------------ 4 files changed, 48 insertions(+), 93 deletions(-) delete mode 100644 public/images/qr-code-ethereum-org-dark.png delete mode 100644 public/images/qr-code-ethereum-org-light.png create mode 100644 public/images/qr-code-ethereum-org.png diff --git a/public/images/qr-code-ethereum-org-dark.png b/public/images/qr-code-ethereum-org-dark.png deleted file mode 100644 index 34c5dd5edcea0ed9b900c36674c004d510f00f0b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15390 zcmZ9zcT|&K@UNSM0HOEZkt)4NCx+e$MFFK35fG$G?;Sxph_nQx3L;IU6FMR#2uO#} zdr<-DoP5vku5<6XeZf2pI_h004=Wrm7JD0K|R-0w8$U z!NRM;5jzlgXg>1>0BE`YdjYkKxK93?;%%g%45%4n-o<_azf{sw0s!h#h;D3g0RZ_1 zEmfr_{=mZ!_awn*Z&r2(Da}v^g1~CQKJ)QBneh0g75rCq#kFVYCxcQ>+cCijX*Vv= z{=0hjEuu6|jmZb=nyWuXsvm>HaznF;jYLBm#QP%O?FI^{2@;H*s!t50!dCQXHNsbc8wW za}vCb2BALtlQ%8|y)mhVbLk&F1;1k3k9FH2ug&3;B2GOn2k-M9axyd0hcwz3@7LKz zzYcbJ9{*`43I`J08b5pdA}rtW&K(uFx@+}i`}Al6?-^UZL)aW%{VkGLkVgo)(zTq$uk~Uf(?f7R3)6dcc6J*# z3fl1S@JH%q023U0zD}|QWO!V(gzu9SmuJG8;6|7kpfy58=~6GYAtS^{M^=b^1_iCm z+?u7$le~6~V2MLrH}YaEaF)wC!1)aSl)`Du`WjzKeXO^9iA&UD0zdz!WTGE+DL3-E z&`?%QFt(NS>YnNm^E?5(;g96?Kc(}4DW_M}vg=9SkFNhAV>4Wmhh>Wh76>)FcHp?VXTYUN5WcStmL|@v?1PP3S$S_8Un51?30r)+o%>DDda4G* zC7LL`hHlTS2QS{o;)#$zy``VOKq#5u`ZJ`sP1~dlB!Zmn$dJp&uO!8~ zfwkl`OOaRPd_t1)kuEYp&K$C|Qye5X5BattGG5h!RoM~vE$fuJr-Td6HbsmXd@brd ztum^Sfo2oLJ`l5bcUR>8zJnmU$e%gdsqV9kA**UrrraDPa(tZ0j86~_zC-$ug|mKb z)~oQ2>&$q2Gz>b$&DR5N%Neu!xf=BA%IcLto-4zLA@g&}m@69`hg&YCRzhomQ;W@W zQ!hWdpcmWdK-0g~Zsdp2}Md|LhlZ$*pUkcm>S6zm}91l~J#-9MS0 z2GJ6lTK!T9u`ve^w2I)kV4grq{Cq7Bn@yCWY!9yWwVp?elyhBgud7qI;jv`icdr$k zx=dkeI%sT3Vj4&EKIbJ8>xYEc=PX?qP0KM}!L$}8I1yDO=gY#l3PiIyGu)pVN;$*D zza0NC*a18#Wt}YdR7-)KAN5rKirg!WM*|e>OSgc-Xc622?y$-nPP~v^ zulY@))?;W43>r(q+CYU1ULEm~}=?7P8R zOQ&-AuO2ndg)SKM_}qw04e|^mg&4{PN)jQp5nQz_PqURN^lAx^=L(5=!pxE66^eKU z4r7&sR(}$V81gfp@zq=|d2Z?lw8TnSo>H?4rl+FCo*RB;L07id#^+5|^@ijuDU~OL z883Jv_jjZ(GpAJ&f2F-1+=zGmWmlw<^Vm*s6ly-7Z3LiU=;}QAN>G9Ie2F*JrR0zR zr4b5$@O*~7ZtW1GWSxgT7nCCmG}(k+w$x#0U&|7Xtt z0$*VbZ^5i(-pCq=pPCotgBR!}T{%rXgexZO%8x7a zsVryMw{hs@kDj@oo_A#g`dxl{FO^*=iAvdr&Oh2RNyG^}{PXNwVd#2p`W^ZMxh7eS zy@k>8-QVWFudMk59b^9(p?5odejy@u|H&#=^6?c8G%zoyIpZh+bJ-M7N*lWTL>A#vyi%3qcPty3x>gse=F$FxK#gsg_Kw>#DSbSz2~m zR^fl~GjowzD1wLz-L*+7-GH9V_kQPYu_oH@@(iFXvocR;RbWCrAT;s!CB?`iRC$Mm zdHRDzi#aADnSwy0eaio@KdZC?PHo?uh+afR9wCjD*}GqVEn(S=U)TP)=I#1bjmxfx zn99P)te3lXb~791C8hXp&vm)KrZZbLSX; zBe3MhF%49mdl{`}7fV-^hn$uLYOvetZHW-1IEfCbdlJUfsw;hiDI$M1P93m}h z`x~A<$;G~SVWA44?!IE_sRf?ViAUo4W;Xy;s9qTSl~*Are0m!FQHhmFEdUQuom^iC zKDc%G>r7#zr+9jgf4Y)B_i;)oyey$UZi)1LE_=R+B_zeUOmb1sw5CKzaE`3(9`@{d_LLksD`bL1J z@2eRKZ4?8MOu7ffdj%EX3S1qatKtNDN9nv+ zgM=0Px{rzyz$!NzG1*a5PaShS^&pA-yLS=wojd*8thN;z#1mg*PXUifvhr&bjd+cC_pgSE+b^BGTUBB&SZl z>0Qfc$OEiX_1{aQYrc|m)7S>*HlOm_ybG_lFZBK3#hAHhT21kX6Jd@4C?oQtr@_#P z_50{mV(_8=U+lD0l3cxRl$_dQ@{kmoi%iJ8HVT-ESWJKAC+MV6AD0D#2`SUpGB72} z0M8)GNK$q|!2fJ7U~skAe{sN#DFKoGQ}lgUF_@*PhTWRxwQ=3}F=>P{gdh+t?z}Zc zX&-q$B*wS(L97JKDthg}O=^tS1DpVNT0!L@MQ;+$bv27kGiGQMci3y=5gJ)+69smz z5cl|oZjX@!iD_Q?h?tMW6mU>Kfy`3{L`baMD}xd@G1+fFK7N)Q95GWlKcdff!{#WQ z{0DXWe{p3IlDv32Y??B(h}cqk$bJlr|B3iz<8HZHzi?08OBPco$8LERkk)U?uvc5( z_T#=&*GGMy79see>NoGD9#7vHv|E8$@Se(G_&NPuQ|AD0_P)R$g2Zw_4Z^pM!LBY9 zMf=*~3^yO506K(wSMi1`L-qBdHse>5QsK$6s!;t764LPYl6d28g*igOycRZj`YyypUL_E;QZjt_u&~f(o;iIuy@&Lb@RwlOmR>Uk)VKR zJ#A6mNTH$*l?X)&Q}|3VKxxYJ&SM&1c#mM+_B+HD^`CRk&;m@wc4`_M#vn8PxahCA zn1C`1phz_X4x*A5H#B@1Pa3ml$U-#dF_Vlsi&$IkrgM~SB~YMlj&L|AC5{vDBk0fi zV!=lqU`uisJg+PkU`BE&%06vNRn$z~=K+OMZZ~6Rl=y%37C3>MoZC-gPb-pYWAXT7`h93=HO(^8*w>WP{)BT0y?~POeTrY zTEXy*elU@79P`h}K(#|Qo$Ea#1jXHg8O6^dxA;aAitZec>uM&~jOLI})ZExqk!g*I z4m#~geR8Y%#`UQyhd!7D`s|8dDCB2T&R}X9iK#$Osh*pT!)(y!o`j-Ji-|MWnb}uY zK2-zD9Y%l`zk~Ria1ZU02ng5TIdwH0L~8ha=WTpkm+8lL{+i!)f5<4ML8b{+-dS5{ z*?6tzr)++40SS;juL<{NIh5rbE+4lfdKvk8U^)%8Y*hP#sPqrq#mvHn6q{HkAX!B| z$&5qQA_LWRS)M>`W$+_??KUW)aF8foB^JuhC{2_srH2d&p&pmMjg+!gn<)8(kd}G| zr~7gIYQ82Zepa+&-;QD{Ln)b_7=a*GGSVE_{k-+q)hof_3kh_cK{rO59}1;!*_7=Hxp z4S7~%q|qWw%*{9_HF9h*vL8@lpLHb~HZobXrD_n*H^MR#u@%qysuuDzts~9$c#2eSCt!lqiLs9mhby8#7b-=jtoKa1BQ-uhEQCUd5b{`RzF`oIa41+ z3bTQ%t(-R_9?hQ9lT<-~(Plz5d^hP#V--^y=q3$4iB;6)-`}6uv!s}wsj~TO%TIe@)(Bx6wu4j;Bg}eHcG-| zH~}}G1jy_1Og}YWhALo967E`)eB1>-DPO_6$hcQe3@;&@kD9-^)1kOY*?wCdslkfV zd_T%lb(FTGO02*M9Gt#LLf-N;CjJ)qtPvT{zmm!a#A(ILjb6D+>0jB#4ctS<#6ihA z+MGEcIdN6r55cxTGj4Rr_4><1tr_m<7@HSLa)8$jMQ4uD>w&F5lN*KT^7(JZ531H1 zdXMz(9u75qxo1TsUP_T}XMm(nrtxdgmA|!!0N;LS%XhwA&1~yr9>n9WjX@DSPVRo^ z6ub9j=$*49#&MG8^XBwNpmGg$zL>=6!JMM>F-KgIkJEGrcb(1Cxy&THiF0zjO z$TfjS8b~Gf!YK%qQpM2>ls=Db1Q^7ZIJ2|uEol;tSLXf^uNm_kUiwpjM|yjZ%XOOO ziHBCOHCn3oFD_bT~*dc5%1@3vv>RK9-_g$S*x z$-Hs|#2h>81<2OKqG121-q}tYj8AK`O}+a<{kCqOaAUH$JDX)S*a!oNY^nD{&}yZ2 zi;X0T4bb$)ii&`ZJjT<+PpKG4-o3F$7CeTj;Qq=}eCfvo^)hI!Mn^b+^NZFZ>*Cj_4iWS+YJAfpmi2 zxP%=8)LYwbg$0_N;9{D0(Xc#P($7w1^AO^X!bGYPlH{(J7pitePw_){D{l|R-I_IX zEWwb|5_M%{-yd_%Zd&{f(b;I7v4Jeuzg3qSRn!Hz-?&sS>8l12fPhX)kn6eLl}#K7 zx;6BcsdmW48|T0u9i#oJ3MKOR4Y+V6@dWQJW&1yz&HIryBbI!=)9Cf#_vD%pT`k2q zO=XSvs5c<#OW=Dvs~xHpZn)kBLzd(ECNAlSOIk$nwsU#Y+VOGzb+ZZH*^=!VONJ!ak@b z>TA|9(Bp#|Uudp)e%Zy{QY?&inci!Y&KZaN-sbTz&pk9Br|?SI6F+ownyuUT{wV)w zfSR*0F{Y1049`Ll+li8tGLHRKBE*kf&VVI9b%uBvM&o8z_zE zcYga?YA>W-uUAwtV+OUQO@Zzz-iW(b>L=&gA&|`;V9z&zo7q(K4d7(Nefjy-e%mAD z_ppopZO2gG>kRXgv93^3#yk8K;7J3U@gwdy_2Oig$9i-f6iy-Eg{Sfxag+^BqlC(m zV?ys&QI?KlkrO`uI#A$dNwkjgZUoyMA1QsLM#r?t-Oh@eJaWqlMyy5suXAfc<2<}ovHy1Z} zo6}dvW>lDLwnZ{edSn+WjTeR)@R%uCSX_L^ zZHppFVYZIPw8NTxMW?Ew~%6>;^K26)!v$OQL=i&s4@inynkz|bb(#`;?+E+ZoI z2>H5H@S;VkgXkZE*Q|@}aH0?=R37gKK0Yud|E_LVx!J(l^HgKeC;-3Pwm=SKF z!SC;jS)~Y;Y@%%aXuG4#hZuON82qL4#zx#5cB|OOm+OX25LFBV;%2GAnWQsY5r_@~ znct(XJ1snGzblq9y{iImT|4uye>##Z^df}}W;xVoy4emEk~qLk@GZMSa^Q^VFD>@O z#Dbq&e)D1Q-1AkE=MVRYcn%y_%#189i+)Jh2zZ#n7IyoOa;37vY5kZ=8WGX3Hu|qi z*c8%vN%95f%Mjk{<0yEb-c3*ZAT@O$4tGU4*(k4#5NGu(MpMavZw-O7s|8%31XggZ z{Z~tm3-}KPyRU;lkXvzP`dS4v2uVNYhUurRQI)Wa#OAWuzq`6tCG<(Uu69@AUSKSi zsr*0A_(@sB50+sZYcz!$DLtA4%{a(qGentjk5nZJB9eFKm4$pf^YlyjJs}y7)0tJa zz(yVS&y4XL1+;!6mPT8(7TRs?gYv z^2fm545_i`R=>gTJbeOIJO{-6x;PtGBQa(9`r!I_0~?ViS_*HKz)jUma9KA6{F0`~uJ$h`j5!Jc$Dz)amS+l05(I z3MI*D9l|>rYIKW0+p$^Q55(DiN49l+`3^rhFGQ6t<1nkOOuHra!TuS$t{Pb9dCfg^ z5}Zq({nXR`*OVe+$z-P1*?(vIx)IPw3zGrUUCoJ-g}VXsgA(opz<82~G4NTz6wL6!~o(jlchm z%zi<~pL`Ds3c6&94Ey~ldh-*RiQ9n|c{GfUC3E{&0mc+5(!K#-A+KfDqy>mD(H1Uv zO(&1PGA5c&D^D5Ezspq4U#3(jC+^`H>mV~>XatlH$1Pp@#BYD_+LfQqALT#6(MVsk z9TE>cbs^Ll7z{m9yc|=w?a)QP>PB2`l5K6{`#<-{41d6Ya5ZAWT$_t+ZUQ+Lo7V=K zbrv0m2O9yi$!Em~d3kn~a2%&5Znzyl+*Qe2gU>Q$ROBrQFY&fP*Mb|9Owh@8*g2;l zMd?W#50@f=;C?ilHnG?B%(r^AttD?a5fZ=Dr=zOC!U4hPOv|Em`V#&PC+0y=N(BTO3XEA?T6msB|+-08#toz&8j zTw=|6-KyT4Igg>$Bg4fH^PwZ|(ai5X%|;X6c_sL(j!Y;cOJj@@$uaclu8}6Z&P0ZC-P3AO`LqSJb>9+f)%=7C@W+nAE zvjfDpow8(BQ*QjD3E^y}d7_9-O~F6F+OhJ5Sj^{%@mShcMC#yCjp1tH}j7J?sXs5Zr3~Yx(6TmcK*GOxO;H28+J}%CUujcZP z?06pqyDDoOJe7i;xYNU3*e{lU+Z}!j0_+GS#-(ky?RihIcZ>8MF68!coW8`A} zx+@PJx`tlE;D)Wc>(p;+UghQ8{0x-Q2P<&pli=r*K;**zY8>zBUryCOLH7m!p*zy^ z2s|h+kNjkp^5=R&*+!jccrfH)Rp?Cl;O*f3=0wuS#dqsq1OkG}TPCEVPXB&LVhcP0 zfEbAT%I`~Ee_w2DJ5Gl- zdOZ0E(CN=x!2|vn3;~fYbq9ZbPB``#GxlQDs7Wld>uGy1x-V4Wdd#|@S>)!+@s>4_ zQ@Xq5;kMt6o%lGE0Da8tm>2s-gmx274{gBdx~1UHSPJ%qycX7U{p~D5lt3OYWkB7# z3dRT2XGAp1mx8RO#G-3fzdk;v%|cq-=`s0auD&nC+q2pT*t&Gze4*z~6Bu+V@;loP zji3~xZQCbp&wjz9I#Vo^AjE%?2qUZybR|#Nasnb{D(fYci=@rB@>H}AjI1$b$$Y8= z9ju2JQhFY^|Mb~hTG93=0v41UEBL7-qP)n#tIx6ImX}|Vi(DmSibwau zxW7&lndi#>YdJwaGk z%P1%IPsPG8+D zdw&3P|J%*GUxiGu1tc1vf5@@jz8kMCdVD2k6I7LQbk(SVIrBmKby#=9&%W%5Jzy~H ztNbynYVTJrem>F;kYpw0Vhn%iveo^B@?LtcBGD-!<@VDQRrig8!Pzu* z-J~Z+k3E_!rF~$9y_x z>#146YjA@&I&y>Ab`J)3o_bq1q1zwx-;G@X2x&GQam<}b-+icvP@($EI6F9P*^g;e z;smG1GuhR$y--CaV~)ZpCn!u)euilX?XffOec}2nn(=6dX<vjDA=A2>PM_BxNi| zXy<#1LUs)P3cl5EgY&2B9e&=V+E@Iz&<}AXg+CPGmB+1Mtj7qv_u@+FqMS%mO``Z( z9fd0UNXglH{pH)Oy*1QzcACD+$^e{i%3-nS6W>e z${J>p1Z*GD=#j-+E?30RMNlu=++9r+96?iTACXW(JXhPj15U$k^YV`F(nE_$Toz`H zQG?sl#kTEEyy@ zJy3y{1xZnWnARJnR|(gR7qQ9_gj*7ziE*6?WlM#oe1k!cW6O}gk5u=fGw+H523tGR zB_62~+2@39cU8A-Jeo77G2%L{EPP-<@^>f9TFf;hy+vn;yRUZ>SPo04Pk%55)areBcr*;G7T<4P3>107-SuSi>X4KJtXB! zl}q)xF9p>KC&bgCKi-eu*)NQBIast%x^mmFnc}y0M8v3g$9U0m(UJ;OPp%L1SQxPn z^>Cj!r*wk2Z14+;8@_wE7O2jWH>%7!4%=h??hD;AcM?*TDS+}iBu`eZQ&7?)UqH*& zr~JQby2fK}U55=LeJr#*3i#pS?)!K{TU7YD?o8Q#AP)0*HJ_Q@hlfqiWW`6mio7X_pTi3^hdm^OG23^$ z;rczei3bvqDf+5Qj-ADS5iN(vL+~IZ?>OeZkSuIG?rta8v3V%|s=6 z?kY|9$sY0=MX*fTJ!-)KB3m;Xdp%rG~qtAMC_$d9L9^C3r7F!^yA*uq9F( zIV|QtI-g(zz1B&HGMZYg5cxfLZD1n?#QPg#p1h*LGup8iXj>l8U3ibc7TR!op1|5s*4`o z#`8bnZ+Oqs`R3p<3B;u<`?)6MWHOuUcRV;xHvru3!T-xI`#Bmse2y#JTOc2F$?|od zo$2?OKDMB>dLw#ikD=?Nzlqp)|31kmeMunJ4CDpx#ff76)U8Hl=#>F)E=V`K_Frd) z`y73E_bg|8!M^3C=2f~1_zpG46b-8a-%6%Bz;WIe=@0=GYnEHQAGPg&3*8_)A^QFu z24smUbVx|1CWe)X__?Z{SA_AJN1u#&I>HHo0t5&+0NT}c<)ZU*>@V|bwR^*;0>$F} zR>95m{EMjhq0aSQ#7c|qUOzWHlx~gry@75E*V`R$^z(xK*?QcR?x+F z4Ze)D44+*i2k6AtM5ebi)FG9q6rsiDVpT~o$*#2Au1?}nTjfZQ29)6E+41EspsGP1 zSJigsq*_tihNV&x>6cMmdhZ^u{Md{LYU<+TC*FIUWG-om))b!<7B@1s79%gYc>Unw z=@(p$yb*h*kzE&IfR%vNfQ#etWT1%Jvlz18SH~$BtSa&{^tZ-i`d%{YG8J9x=w%k% zlu*f7{FO9M>&NRE9F1NR@J(~yGMiTxt5bUI_UQ7vCwtD*?f3lUe{jBsQvsgR*q-K zqsCvw(IC=SS5W^weFR`u;Y6DY0{|iPEiSogxs_S#kcDnzRuS<3bUCiiiZ5gq&$yc* zD+%l;&IoDKDg68upQU8_GjThSnj>fIL%-nkWz-Hs_!PK1;&# zN4H$vl@CbwGl-C`5d{z#93^uVCB=iUySb#O7^i^+7dD%i#83}0*49|aO+<&35`-Fy z@a@cl(4`k4FjR~NR-)CHRH2f7A!Cmz0_QJa@bck={s^oB>(%GEN|go2WhSN6Y6Lyb ziDW`#KG5Gol7^u;4CgU^HbY^_nx8_iT46#V)8E?fN-06YML>Wxc!3SRKPA{nfJmdgU z178+$MbBzeV$6J`;vN8B#*+qn0W){m>`uTw5;dy1q-FU$kEGA_QxO80y&jQ=t{k=2 z_J%xQ${1kF@q2=kx*u^7aT`IdBbk$*=zwI&fB8;QX9ecmF-Ipx2n%+vK4+5ZncBQm zhu3d$^P~A!$fqXpLv_*eAd23!BnDn@ToVI)_P~vOa+A^JaL0?iANub;u!9L9X7<=F z#6)t*gA3OmxMf)K;^m+kv&1rt2sZ3dkuUL_Ggk|j`N)TM_j-xnl}$i}RIa-j0$33{rD?XuMUu3{7N+(1onXEy8oqgbrk78! zoF||Medi-D6%?n8C>Y5y!U96=vufS0j%m-w7{q_|iFO(1G7fT1dnN}FF*B~Atq2)% z`3p5|>PvrA-nCBJ`3_TA)!sGI8`ml|<@S)TF$-g3rn|j^$dbu2E+C0^E~t$QnOqoF<4fNcZA*n+TR!MgDN;NNiWcV=El-OtQb9utn$8HY z#8|@Xmxxu5Nct~YB3w{{{SRh)vdW4Fv&cq|4I!?GhmNB^KUye$nA#^72y)dr4OfgPvFm{lyWAEgLx?EKRD`g;El0; z{JJCd;O&2sIeaHN zVT&hy?EB#frKAt{ry>*1n`M_|Ih9!Q{Z#}17)AQJ674f^OyUonX4JCiH*arAF{vTL5zqXf_FT+g% zl9lz;1|`573Fy18lsE@c7ndIFkaC@Ci%Y8|%Po z)RHns(>353>e(Y;3Z;i|v6&|5S2>p3j*=pDqw^qSp)}e-r`S2EV7f24Mww6vdCj_7 z0p_S{ACiOH5*SbQDp*dXteqNEimqXKkGWze!>M^tQdC_wqTJZaf(4Y+Ans4>k1bcz zYYTaR)YB|N2IERmLij{e6t*F%MGxZ>gl@S=+iWR-vTi5ljosyk9n(!@7De6Vf0(1+ zsafHVHN?aG*s?e=-X|h&E&PFJZI!2gjhvKvQfB$!wo0pUDyd5nJ&esSMf4zlcOEGd z{yQj84tZSlhs`X0&ngtb&#-auO?HGet!^Jt!swmGtPk}MY>;%-+q}X#;fWzQ@A4gjF zy7mcW1e+?F#m8;rf2&)#;A)Bg!*EJ)wGHz7;9~`bP8mxoP)m4~*!r+ler)swfbuT_?XtdgRK(W(w8%`?xWNG{nno z;%fsz26Z!4j;AtG#hIENkK@FujIJDkJI@BWNh6G?IBc!x`TUc|mG)CA#POri%)qmd z=cs=_t?FMIT_zc5U{CdEwfOHF20k_hb-a~zF?U^-_I_s#hU*y&0rWy^8I5EvGE9jc zK66U%I{fDpZJALKYsGt5*eyZq__>bXhvM@xk=Ga=74^|V_R z#lR89`4fP99*M(#{7pAH_CF?_aw17UHA$$37LWkP8r-T8#3%1HoCwDv`uR2NaZwpb zFg~hwHLUV11#IK;^^AF!>>1qs9&XvzS@jF9PyYW4z5n47{oa!L2fr{Qkg3EOdxDvy z_V4~dKfl1a>47B_zaaXov`lyi@*$O2ju9Y)(GsG@ZHL742@}l9N6L48XJ~}yL)6x& z{2bn^Zm4v*|Lvf@ob40TUMLpK7aIzxU*$OoJp>+40-J%;9|bq#rg2nrYc-Wq-+)P& z-#&N@{3jK@Q~cBNHeA@FX)=)JZ6AG#NvO#74w$OZJ_z?MnA|hwBXXyt4F|LhABs@R zik1m8(tQozY|Qz&Y}vbPk4{iv3^tlC#~I)~nnJWe4K1I^es!~2p(|?ce8Q$CY$RjP zCd&Nj-q+cEpk)!&@@zieb4NrwmXaY~XjFDg=I!swN2dvz8^)Gwi-Lo!M423pd#Tay zEja94J$b-hK*1i%k9hJtW)MqPxwizvF^^{IWS=}Ge1(M^Ig8%H5v|cRm(ioG(d}d< zS(;dq9ZT8Hu_iz^D?WD&v8AasM=01SnJ+$qdafGJga=2Gn5O)rG&cigmK4_F*9I$e zXKIKBRlJ~zQ?W*65Ti9w0nGm9Qbi&1mMSBe-XVvSV#b9((i!y40HEwxBHrAV`2QDR z{}IWh&*Cu#AwvD>CWxRuQKrFF7yyyJXIGxj?&D3Ub(~HW-z2gk}pE&y>eld^=$U&KdMoN=Q72Xt`YD&5Q5W8%qFd@oeIjqcE+H&N1%-4Rw0to zG;k;!P^tQ>uNJLboNR6&BFgZJG;8AMDz;mzl7%wNh9ftDM55wzQBxf4E6UrPMD6D^ zEVgNyAG3`qiuy#u#L>;1xh+Qa?ynP7OHJyyV*?Na(@(5P@*C}b#5Qq@%cxY!#O?ir za;r}m1>3pu_v>jqI&*zGFdf@8a}c$@=$^^Z#1OSgfN~`B`_`U(zVTqwS+VH`Oy%SM zPbsLFwEUSHxar`zD?h>|S&(`7Peb=bBMB?^O|!K%VU#ykW&I&35h^|64Bx>-iA8Mf zK+S4nT{SwgzVnoFO$8c7v6>z3-Is~*9VypSQcTy?T>L6akQe@A@T0CQNqf$!rYh7z z-lz|htm`<>nik%xPm75$VZy+3ru_O6K6p(u6B40Z*yCNY$*gB)Us~6@#r$vB5PQdL zvp0sFC*CEu&Sj>|_`LNwK(&Yn-+;AYyE&4G15NL5OOh9$8K22Nt`dU5x5w~~OroN6 zT8mK#cxAYRFUkgbML$QyK$r&FaX-lU_rEc$Ko&{Na)PHuPnbR8ZBq$GMC7YgDkcslJdct1nM2!r=tnLoeeis<9DW%*_Ub*VM}zNq>_15d+w ztgZn|b^#QjKz5M<4=+fx4$_j`o3px?$AS~hk}Pk=t=`5y@U78g%{Vd%jv*LI>99rj*vI<>1>6ev4w`3i&?Q_J8jE{l~ih#AT11?(QY8b=76@ zG$Fy#pq<_G4=e$E1*hW5LHZH>vF5~g|2u{Vbh%_`J&b^HR4k>amu!rnm29r4Gy$wC zX^gr4`O>;vw*_Pck<8=)7mb4F4Hu)1%Dgz4_SY74qV&m?W=iz^U{%Lo)zVc3ndB1s zXsOTD)jdBTRSEVOFp7#13D`@8yH`8Tt_=|?8lHwM4=RoudOs!G&5>WJR_LG%y_(ni z^CN2Bb*@goQ^f5jFqp#cYq9Fpil9z!F7#lm=~h0Zd-~Xe6zzLpN5NJT`uc;^hx0Xt z!V|7gZ)UeI45TG_qh-!Wk|7}j7{Z4GG3b_0HDDfIFLnYw%@EzC*F8H%WA=pe8#N-r?5QWZh{fz&Y{IJ29 zRDI}`93E*%E^^7rS47}}d4-VAHnt5c zlt9k6fn)YSlXbO?n!}S@8(aJh0X6K7hduvGEHHEhZ_EBCij@AlVCGu=fa~@`+y|dB z=;@%0Fq+#^vlDPZZSI3hH}>+DwZ+Z}AB|<5REN=AtyFS8{Y^Q1sV~5GY7)A#P9$o> z=+~g*NpgP==4a=E9p194che(@fIn$Vww6zAC>R;1FBFxOq_|g5LH1wj5Q5OBUqK<& zWOP4|&mQq&?{r*HEKd>=dlafPF&7!|M#OZu1;52sVi$d@UjSXut>yl(Qey0NUVxUG LzG{uKP2~RqbtHa6 diff --git a/public/images/qr-code-ethereum-org-light.png b/public/images/qr-code-ethereum-org-light.png deleted file mode 100644 index aa06b08d4e37f96a412ccf8891670321e12c0725..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 18301 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 Ef(dQaDgXcg diff --git a/public/images/qr-code-ethereum-org.png b/public/images/qr-code-ethereum-org.png new file mode 100644 index 0000000000000000000000000000000000000000..46c447914acb61fd91b0af864adf3fa555a1dcd0 GIT binary patch literal 9313 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 Gv;PBK1i6_2 literal 0 HcmV?d00001 diff --git a/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx b/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx index 8c6d1e3da2b..d93e31d55ea 100644 --- a/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx +++ b/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx @@ -1,105 +1,60 @@ -import React from "react" import { motion } from "framer-motion" -import { Button } from "@chakra-ui/react" -import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react" -import { Image } from "@/components/Image" +import EthGlyph from "@/components/icons/eth-glyph-solid.svg" +import { TwImage } from "@/components/Image" +import { Button } from "@/components/ui/buttons/Button" +import { Flex } from "@/components/ui/flex" import { FAKE_DEMO_ADDRESS } from "../../constants" import { NotificationPopover } from "../../NotificationPopover" -import QRDark from "@/public/images/qr-code-ethereum-org-dark.png" -import QRLight from "@/public/images/qr-code-ethereum-org-light.png" +import QrImage from "@/public/images/qr-code-ethereum-org.png" -const MotionBox = motion(Box) - -export const ReceiveEther = () => { - const qrImage = useColorModeValue(QRLight, QRDark) - - const SPACING = { base: 3, md: 5 } - const QR_SIZE = { base: "80px", md: "120px" } - return ( - ( + +

Receive assets

+

+ Show this QR code containing your account address to the sender +

+ {/* QR Code */} + - - Receive assets - - - Show this QR code containing your account address to the sender - - {/* QR Code */} +
+ +
+ +
+ + +
+

Your Ethereum address

+

{FAKE_DEMO_ADDRESS}

+
- - - + - - - - Your Ethereum address - - - {FAKE_DEMO_ADDRESS} - - - - - - - - Use this address for receiving tokens and NFTs on the Ethereum network. - - - ) -} + +

+ Use this address for receiving tokens and NFTs on the Ethereum network. +

+ +) From 7bd899e8e8915bc1df94eb87bc591713fa9b250c Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 18:09:00 -0700 Subject: [PATCH 072/129] refactor: ReceivedEther to tailwind --- .../screens/SendReceive/ReceivedEther.tsx | 29 +++++-------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/src/components/Simulator/screens/SendReceive/ReceivedEther.tsx b/src/components/Simulator/screens/SendReceive/ReceivedEther.tsx index 015d4669056..c56d2f29a6a 100644 --- a/src/components/Simulator/screens/SendReceive/ReceivedEther.tsx +++ b/src/components/Simulator/screens/SendReceive/ReceivedEther.tsx @@ -1,7 +1,6 @@ -import React, { useEffect, useMemo, useState } from "react" +import { useEffect, useMemo, useState } from "react" import { AnimatePresence, motion } from "framer-motion" import { MdClose, MdInfo } from "react-icons/md" -import { Flex, Icon, Text } from "@chakra-ui/react" import type { SimulatorNavProps } from "@/lib/types" @@ -85,32 +84,20 @@ export const ReceivedEther = ({ /> {showToast && !hidden && ( - - - + +

You received {displayEth} ETH ({displayUsd}) {sender ? ` from ${sender}` : ""}! - - setHidden(true)} /> - +

+ setHidden(true)} /> + )} From 5ad3871ee9bef2e2fc59c266a7d88e04e9d6c66b Mon Sep 17 00:00:00 2001 From: saurabhburade Date: Wed, 25 Sep 2024 12:21:41 +0530 Subject: [PATCH 073/129] feat: migrate ContributorsQuizBanner to tailwind --- .../Banners/ContributorsQuizBanner.tsx | 62 ++++++++----------- 1 file changed, 25 insertions(+), 37 deletions(-) diff --git a/src/components/Banners/ContributorsQuizBanner.tsx b/src/components/Banners/ContributorsQuizBanner.tsx index a1128bdfa59..8490270d60b 100644 --- a/src/components/Banners/ContributorsQuizBanner.tsx +++ b/src/components/Banners/ContributorsQuizBanner.tsx @@ -1,12 +1,7 @@ -import { Box, Flex, Heading, Text } from "@chakra-ui/react" - -import { Image } from "@/components/Image" - import { cn } from "@/lib/utils/cn" import { ButtonLink } from "../Buttons" - -import PeopleLearning from "@/public/images/people-learning.png" +import { Stack } from "../ui/flex" // TODO: refactor to use CalloutBanner component function ContributorsQuizBanner(props: React.HTMLAttributes) { @@ -18,47 +13,40 @@ function ContributorsQuizBanner(props: React.HTMLAttributes) { )} {...props} > - - People learning about Ethereum - - - + */} + - - Unsure where to start? - + +

Unsure where to start?

+

Take a quick quiz and find out how you can contribute on ethereum.org. - - - +

+ +
Take a quiz - - +
+ ) } From 69b2d20208889dcd2ecac675d5d2cb9714abf65d Mon Sep 17 00:00:00 2001 From: saurabhburade Date: Wed, 25 Sep 2024 15:34:14 +0530 Subject: [PATCH 074/129] fix: image --- .../Banners/ContributorsQuizBanner.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/Banners/ContributorsQuizBanner.tsx b/src/components/Banners/ContributorsQuizBanner.tsx index 8490270d60b..9e9e4e5b553 100644 --- a/src/components/Banners/ContributorsQuizBanner.tsx +++ b/src/components/Banners/ContributorsQuizBanner.tsx @@ -1,36 +1,41 @@ import { cn } from "@/lib/utils/cn" import { ButtonLink } from "../Buttons" -import { Stack } from "../ui/flex" +import { TwImage } from "../Image" +import { Flex, Stack } from "../ui/flex" + +import PeopleLearning from "@/public/images/people-learning.png" // TODO: refactor to use CalloutBanner component -function ContributorsQuizBanner(props: React.HTMLAttributes) { +function ContributorsQuizBanner({ + className, + ...props +}: React.HTMLAttributes) { return (