+
{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/LeftNavBar/index.tsx b/src/components/LeftNavBar/index.tsx
index ee654d9280e..d2f95aa9920 100644
--- a/src/components/LeftNavBar/index.tsx
+++ b/src/components/LeftNavBar/index.tsx
@@ -32,7 +32,10 @@ const LeftNavBar = ({
>
{dropdownLinks && (
-
)}
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/MdComponents/MdComponents.stories.tsx b/src/components/MdComponents/MdComponents.stories.tsx
index 9d101a7334d..52db25e5037 100644
--- a/src/components/MdComponents/MdComponents.stories.tsx
+++ b/src/components/MdComponents/MdComponents.stories.tsx
@@ -1,8 +1,6 @@
import pickBy from "lodash/pickBy"
import type { Meta, StoryObj } from "@storybook/react/*"
-import type { List as ButtonDropdownList } from "@/components/ButtonDropdown"
-
import { viewportModes } from "../../../.storybook/modes"
import MdComponentSet from "."
@@ -34,8 +32,6 @@ const {
hr: HR,
pre: Pre,
Page,
- MobileButton,
- MobileButtonDropdown,
} = MdComponentSet
const Para = () => (
@@ -53,9 +49,6 @@ export const MdComponents: StoryObj = {
-
-
Heading1
Heading2
@@ -75,55 +68,3 @@ export const MdComponents: StoryObj = {
),
}
-
-const roadmapDropdownLinks: ButtonDropdownList = {
- text: "nav-roadmap-options",
- ariaLabel: "nav-roadmap-options-alt",
- items: [
- {
- text: "nav-roadmap-home",
- href: "/roadmap/",
- matomo: {
- eventCategory: `Roadmap dropdown`,
- eventAction: `Clicked`,
- eventName: "clicked roadmap home",
- },
- },
- {
- text: "nav-roadmap-security",
- href: "/roadmap/security",
- matomo: {
- eventCategory: `Roadmap security dropdown`,
- eventAction: `Clicked`,
- eventName: "clicked roadmap security",
- },
- },
- {
- text: "nav-roadmap-scaling",
- href: "/roadmap/scaling",
- matomo: {
- eventCategory: `Roadmap scaling dropdown`,
- eventAction: `Clicked`,
- eventName: "clicked roadmap scaling home",
- },
- },
- {
- text: "nav-roadmap-user-experience",
- href: "/roadmap/user-experience/",
- matomo: {
- eventCategory: `Roadmap user experience dropdown`,
- eventAction: `Clicked`,
- eventName: "clicked roadmap user experience home",
- },
- },
- {
- text: "nav-roadmap-future-proofing",
- href: "/roadmap/future-proofing",
- matomo: {
- eventCategory: `Roadmap future-proofing dropdown`,
- eventAction: `Clicked`,
- eventName: "clicked roadmap future-proofing home",
- },
- },
- ],
-}
diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
index e9ec3c529a3..18f90ad1f14 100644
--- a/src/components/MdComponents/index.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -1,11 +1,8 @@
-import { ComponentProps, type HTMLAttributes } from "react"
+import { type HTMLAttributes } from "react"
import { Badge, Box, type BoxProps } from "@chakra-ui/react"
import type { ChildOnlyProp } from "@/lib/types"
-import ButtonDropdown, {
- type ButtonDropdownProps,
-} from "@/components/ButtonDropdown"
import Contributors from "@/components/Contributors"
import MarkdownImage from "@/components/MarkdownImage"
import TooltipLink from "@/components/TooltipLink"
@@ -36,7 +33,7 @@ export const commonHeadingAttributes = (className: string, id?: string) => ({
id,
className: cn(
"font-bold leading-xs my-8",
- id && "scroll-mt-28 relative",
+ id && "scroll-mt-28 relative group",
className
),
"data-group": !!id || undefined,
@@ -155,32 +152,6 @@ export const ContentContainer = (props: Pick) => {
)
}
-export const MobileButton = (props: ChildOnlyProp) => {
- return (
-
- )
-}
-
-export const StyledButtonDropdown = ({
- list,
- className,
- ...rest
-}: HTMLAttributes & Pick) => (
-
-
-)
-
-export const MobileButtonDropdown = ({
- className,
- ...props
-}: ComponentProps) => (
-
+
)
}
diff --git a/src/components/MobileButtonDropdown.tsx b/src/components/MobileButtonDropdown.tsx
new file mode 100644
index 00000000000..bc53f5ebdf7
--- /dev/null
+++ b/src/components/MobileButtonDropdown.tsx
@@ -0,0 +1,11 @@
+import ButtonDropdown, { type ButtonDropdownProps } from "./ButtonDropdown"
+
+const MobileButtonDropdown = (props: ButtonDropdownProps) => {
+ return (
+
+
+ )
+}
+
+export default MobileButtonDropdown
diff --git a/src/components/Staking/StakingConsiderations/index.tsx b/src/components/Staking/StakingConsiderations/index.tsx
index ceca0aeed77..ed0f0d9b1ef 100644
--- a/src/components/Staking/StakingConsiderations/index.tsx
+++ b/src/components/Staking/StakingConsiderations/index.tsx
@@ -76,7 +76,7 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
return (
-
{!!pageData && (
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/Tabs.tsx b/src/components/Tabs.tsx
deleted file mode 100644
index 01eed98203c..00000000000
--- a/src/components/Tabs.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { ReactNode } from "react"
-import {
- Tab,
- TabList,
- TabPanel,
- TabPanels,
- Tabs as ChakraTabs,
-} from "@chakra-ui/react"
-
-interface Tab {
- title: string
- content: ReactNode
-}
-
-export type TabsProps = {
- tabs: Array
- onTabClick?: (tabIndex: number) => void
-}
-
-const Tabs = ({ tabs, onTabClick }: TabsProps) => {
- const handleTabClick = (index: number) => {
- if (onTabClick) {
- onTabClick(index)
- }
- }
-
- return (
-
-
- {tabs.map((tab, index) => (
- handleTabClick(index)}>
- {tab.title}
-
- ))}
-
-
- {tabs.map((tab, index) => (
- {tab.content}
- ))}
-
-
- )
-}
-
-export default Tabs
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/components/ui/__stories__/Tag.stories.tsx b/src/components/ui/__stories__/Tag.stories.tsx
new file mode 100644
index 00000000000..230422b56e1
--- /dev/null
+++ b/src/components/ui/__stories__/Tag.stories.tsx
@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { HStack, VStack } from "../flex"
+import { Tag } from "../tag"
+
+const meta = {
+ title: "Molecules / Display Content / New Tags",
+ component: Tag,
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+// "normal" is default status
+const statusArray = ["normal", "tag", "success", "error", "warning"] as const
+
+// "subtle" is default variant
+const variantArray = ["subtle", "highContrast", "solid", "outline"] as const
+
+const StyleVariantList = () => (
+
+ {statusArray.map((status) => (
+
+ {variantArray.map((variant) => (
+
+ Tag Name
+
+ ))}
+
+ ))}
+
+)
+
+export const StyleVariantsBasic: Story = {
+ render: (args) => ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {
+ asChild?: boolean
+}
+
+function Tag({ className, asChild, variant, status, ...props }: TagProps) {
+ const Comp = asChild ? Slot : "div"
+ return (
+ &
Pick & {
@@ -40,11 +36,7 @@ export const ContentLayout = ({
-
- )}
+ {dropdownLinks && ) => (
-
-
-const ContentContainer = (props: ContentContainerProps) => (
- ) => (
) => (
/>
)
-const baseSubHeadingClasses = "leading-xs font-semibold"
+const baseSubHeadingClasses = "leading-xs font-semibold break-words"
const H3 = (props: HTMLAttributes) => (
) => (
-
+
+
)
export const docsComponents = {
@@ -153,9 +80,6 @@ export const docsComponents = {
h2: H2,
h3: H3,
h4: H4,
- p: Paragraph,
- ul: UnorderedList,
- ol: OrderedList,
pre: Codeblock,
...mdxTableComponents,
Badge,
@@ -197,16 +121,19 @@ export const DocsLayout = ({
const absoluteEditPath = getEditPath(relativePath)
return (
-
+
{isPageIncomplete && (
)}
-
+
-
+
{frontmatter.title}
+ {children}
+
{isPageIncomplete &&
+
{tocItems && (
)}
-
-
+
+
)
}
diff --git a/src/layouts/Tutorial.tsx b/src/layouts/Tutorial.tsx
index 087f9fe9492..8fc1bcdba0e 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,37 +24,11 @@ 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")
-
- return (
- ) => (
) => (
/>
)
-const StyledDivider = (props) => ) => (
+
)
-const KBD = (props) => {
- const borderColor = useToken("colors", "primary.base")
-
- return (
- ) => (
+
+
-
- {frontmatter.title}
-
- {tocItems && (
-
-
+ {frontmatter.title}
+
@@ -285,22 +282,19 @@ const AssetsPage = () => {
title={t("page-assets-infrastructure")}
alt={t("page-assets-infrastructure")}
image={infrastructure}
- artistName="William Tempest"
- artistUrl="https://cargocollective.com/willtempest"
+ artistName="WT"
/>
@@ -308,22 +302,19 @@ const AssetsPage = () => {
title={t("page-assets-future")}
alt={t("page-assets-future")}
image={future}
- artistName="William Tempest"
- artistUrl="https://cargocollective.com/willtempest"
+ artistName="WT"
/>
diff --git a/src/pages/dapps.tsx b/src/pages/dapps.tsx
index 64ac402ffa8..4b826b70fa2 100644
--- a/src/pages/dapps.tsx
+++ b/src/pages/dapps.tsx
@@ -61,7 +61,6 @@ import artblocks from "@/public/images/dapps/artblocks.png"
import arweave from "@/public/images/dapps/arweave.png"
import asyncart from "@/public/images/dapps/asyncart.png"
import audius from "@/public/images/dapps/audius.png"
-import augur from "@/public/images/dapps/augur.png"
import axie from "@/public/images/dapps/axie.png"
import balancer from "@/public/images/dapps/balancer.png"
import brave from "@/public/images/dapps/brave.png"
@@ -781,13 +780,6 @@ const DappsPage = () => {
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"),
diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx
index 5c224abc8bc..e4e9cba713f 100644
--- a/src/pages/get-eth.tsx
+++ b/src/pages/get-eth.tsx
@@ -2,7 +2,6 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next/types"
import { useTranslation } from "next-i18next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
import type { ReactNode } from "react"
-import { useBreakpointValue } from "@chakra-ui/react"
import type { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
@@ -38,6 +37,7 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
import { getLocaleTimestamp } from "@/lib/utils/time"
import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
import uniswap from "@/public/images/dapps/uni.png"
import dapps from "@/public/images/doge-computer.png"
import oneinch from "@/public/images/exchanges/1inch.png"
@@ -104,6 +104,12 @@ const GetEthPage = ({
}: InferGetStaticPropsType) => {
const { t } = useTranslation("page-get-eth")
+ const walletImageWidth = useBreakpointValue({
+ base: "full",
+ sm: "60%",
+ md: "50%",
+ })
+
const tokenSwaps: CardListItem[] = [
{
title: "Uniswap",
@@ -144,12 +150,6 @@ const GetEthPage = ({
},
]
- const walletImageWidth = useBreakpointValue({
- base: "full",
- sm: "60%",
- md: "50%",
- })
-
return (
diff --git a/src/pages/staking/index.tsx b/src/pages/staking/index.tsx
index f63b074f2fc..ab418a02e45 100644
--- a/src/pages/staking/index.tsx
+++ b/src/pages/staking/index.tsx
@@ -20,12 +20,8 @@ import Card from "@/components/Card"
import ExpandableCard from "@/components/ExpandableCard"
import FeedbackCard from "@/components/FeedbackCard"
import LeftNavBar from "@/components/LeftNavBar"
-import {
- ContentContainer,
- MobileButton,
- MobileButtonDropdown,
- Page,
-} from "@/components/MdComponents"
+import { ContentContainer, Page } from "@/components/MdComponents"
+import MobileButtonDropdown from "@/components/MobileButtonDropdown"
import PageHero from "@/components/PageHero"
import PageMetadata from "@/components/PageMetadata"
import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallout"
@@ -632,9 +628,7 @@ const StakingPage = ({
-
-
+ 
