Merge branch 'staging' into internet-is-changing

package.json

@@ -54,7 +54,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^10.13.0",
     "gray-matter": "^4.0.3",

public/content/dao/index.md

@@ -1,5 +1,5 @@
 ---
-title: What is a DAO? | Decentralized Autonomous Organizations
+title: Decentralized autonomous organizations (DAOs)
 description: An overview of DAOs on Ethereum
 lang: en
 template: use-cases

public/content/defi/index.md

@@ -1,5 +1,5 @@
 ---
-title: What is DeFi? | Benefits and Use of Decentralised Finance
+title: Decentralized finance (DeFi)
 description: An overview of DeFi on Ethereum
 lang: en
 template: use-cases

public/content/developers/docs/gas/index.md

@@ -1,5 +1,5 @@
 ---
-title: "Ethereum gas and fees: technical overview"
+title: Gas and fees
 description:
 lang: en
 ---

public/content/developers/docs/mev/index.md

@@ -181,6 +181,7 @@ Below is an overview of how the Builder API works:
 5. A validator using the Builder API is still expected to build a block locally in case the block builder fails to respond promptly, so they don't miss out on block proposal rewards. However, validator cannot create another block using either the now-revealed transactions or another set, as it would amount to _equivocation_ (signing two blocks within the same slot), which is a slashable offense.
 
 An example implementation of the Builder API is [MEV Boost](https://github.com/flashbots/mev-boost), an improvement on the [Flashbots auction mechanism](https://docs.flashbots.net/Flashbots-auction/overview/) designed to curb the negative externalities of MEV on Ethereum. Flashbots auction allows validators in proof-of-stake to outsource the work of building profitable blocks to specialized parties called **searchers**.
+![A diagram showing the MEV flow in detail](./mev.png)
 
 Searchers look for lucrative MEV opportunities and send transaction bundles to block proposers along with a [sealed-price bid](https://en.wikipedia.org/wiki/First-price_sealed-bid_auction) for inclusion in the block. The validator running mev-geth, a forked version of the go-ethereum (Geth) client only has to choose the bundle with the most profit and include it as part of the new block. To protect block proposers (validators) from spam and invalid transactions, transaction bundles pass through **relayers** for validation before getting to the proposer.
 

public/content/guides/how-to-use-a-wallet/index.md

@@ -1,5 +1,5 @@
 ---
-title: How to use Ethereum Wallets | Step by Step
+title: How to use a wallet
 description: A guide explaining how to send, receive tokens and connect to web3 projects.
 lang: en
 ---

public/content/nft/index.md

@@ -1,5 +1,5 @@
 ---
-title: What are NFTs? | Benefits and use
+title: Non-fungible tokens (NFT)
 description: An overview of NFTs on Ethereum
 lang: en
 template: use-cases

public/content/smart-contracts/index.md

@@ -1,5 +1,5 @@
 ---
-title: "Smart contracts: What are they and benefits"
+title: Smart contracts
 description: A non-technical introduction to smart contracts
 lang: en
 ---

src/@chakra-ui/components/components.utils.ts

@@ -9,7 +9,6 @@ const {
   Checkbox: checkboxDefaultTheme,
   CloseButton: closeButtonDefaultTheme,
   Code: codeDefaultTheme,
-  Divider: dividerDefaultTheme,
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,
@@ -37,7 +36,6 @@ export {
   checkboxDefaultTheme,
   closeButtonDefaultTheme,
   codeDefaultTheme,
-  dividerDefaultTheme,
   drawerDefaultTheme,
   formDefaultTheme,
   formLabelDefaultTheme,

src/@chakra-ui/components/index.ts

@@ -8,7 +8,6 @@ import { Checkbox } from "./Checkbox"
 import {
   closeButtonDefaultTheme,
   codeDefaultTheme,
-  dividerDefaultTheme,
   drawerDefaultTheme,
   formDefaultTheme,
   formLabelDefaultTheme,
@@ -39,7 +38,6 @@ export default {
   Checkbox,
   CloseButton: closeButtonDefaultTheme,
   Code: codeDefaultTheme,
-  Divider: dividerDefaultTheme,
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,

src/components/BigNumber/index.tsx

@@ -43,7 +43,7 @@ const BigNumber = ({
     >
       {value ? (
         <>
-          <div className="text-5xl font-bold">{value}</div>
+          <div className="text-4xl font-bold sm:text-5xl">{value}</div>
           <div className="text-sm">
             {children}
             {sourceName && sourceUrl && (

src/components/Buttons/SvgButtonLink.tsx

@@ -1,18 +1,9 @@
 import { cva, VariantProps } from "class-variance-authority"
-import type { FC, ReactNode, SVGProps } from "react"
+import type { FC, SVGProps } from "react"
 
 import { cn } from "@/lib/utils/cn"
 
-import { BaseLink } from "../ui/Link"
-
-type SvgButtonLinkProps = {
-  Svg: FC<SVGProps<SVGElement>>
-  label?: string
-  children: ReactNode
-  href: string
-  className?: string
-  size?: number
-}
+import { BaseLink, LinkProps } from "../ui/Link"
 
 const variants = cva("flex items-center gap-3.5", {
   variants: {
@@ -28,14 +19,20 @@ const variants = cva("flex items-center gap-3.5", {
 
 type Variants = VariantProps<typeof variants>
 
+export type SvgButtonLinkProps = LinkProps & {
+  Svg: FC<SVGProps<SVGElement>>
+  label?: string
+  size?: number
+} & Variants
+
 const SvgButtonLink = ({
   label,
   children,
   Svg,
   className,
   variant,
   ...props
-}: SvgButtonLinkProps & Variants) => (
+}: SvgButtonLinkProps) => (
   <BaseLink
     className={cn(
       "group rounded-2xl no-underline focus:outline focus:outline-4 focus:outline-offset-8",

src/components/Homepage/BentoCard.tsx

@@ -17,6 +17,7 @@ export type BentoCardProps = HTMLAttributes<HTMLDivElement> & {
   imgWidth?: number
   imgHeight?: number
   title: string
+  eventName: string
 }
 
 const BentoCard = ({
@@ -28,6 +29,7 @@ const BentoCard = ({
   imgWidth,
   imgHeight,
   title,
+  eventName,
 }: BentoCardProps) => (
   <Card
     className={cn(
@@ -43,7 +45,16 @@ const BentoCard = ({
         {title}
       </CardTitle>
       <p className="mb-8 text-md">{children}</p>
-      <ButtonLink href={href} variant="outline" isSecondary>
+      <ButtonLink
+        href={href}
+        variant="outline"
+        isSecondary
+        customEventOptions={{
+          eventCategory: "Homepage",
+          eventAction: "use cases",
+          eventName,
+        }}
+      >
         {action} <ChevronNext />
       </ButtonLink>
     </div>

src/components/Homepage/useBentoBox.ts

@@ -17,6 +17,7 @@ type CopyDetails = {
   children: string
   action: string
   href: string
+  eventName: Category
 }
 
 const gradientStops = "from-20% to-60%"
@@ -100,6 +101,7 @@ export const useBentoBox = () => {
     children: t(`page-index:page-index-bento-${category}-content`),
     action: t(`page-index:page-index-bento-${category}-action`),
     href,
+    eventName: category,
   })
 
   return [

src/components/Homepage/useHome.ts

@@ -53,6 +53,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleWalletContent,
+      eventName: "bank",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-1"),
@@ -61,6 +62,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleTokenContent,
+      eventName: "token",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-2"),
@@ -69,6 +71,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-javascript",
       code: CreateWalletContent,
+      eventName: "wallet",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-3"),
@@ -77,6 +80,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleDomainRegistryContent,
+      eventName: "dns",
     },
   ]
 
@@ -86,21 +90,24 @@ export const useHome = () => {
       description: t("page-index:page-index-cta-wallet-description"),
       href: "/wallets/find-wallet/",
       Svg: PickWalletIcon,
-      className: "text-primary hover:text-primary-hover", // TODO: Confirm hover style
+      className: "text-primary hover:text-primary-hover",
+      eventName: "find wallet",
     },
     {
       label: t("page-index:page-index-cta-get-eth-label"),
       description: t("page-index:page-index-cta-get-eth-description"),
       href: "/get-eth/",
       Svg: EthTokenIcon,
       className: "text-accent-a hover:text-accent-a-hover",
+      eventName: "get eth",
     },
     {
       label: t("page-index:page-index-cta-networks-label"),
       description: t("page-index:page-index-cta-networks-description"),
       href: "/layer-2/", // TODO: Update with new networks page when ready
       Svg: ChooseNetworkIcon,
       className: "text-accent-b hover:text-accent-b-hover",
+      eventName: "L2",
     },
     {
       label: t("page-index:page-index-cta-dapps-label"),
@@ -111,6 +118,7 @@ export const useHome = () => {
         "text-accent-c hover:text-accent-c-hover",
         isRtl && "[&_svg]:-scale-x-100"
       ),
+      eventName: "dapps",
     },
   ]
 
@@ -166,27 +174,31 @@ export const useHome = () => {
       description: t(
         "page-index:page-index-join-action-contribute-description"
       ),
+      eventName: "contribute",
     },
     {
       Svg: FaGithub,
       label: "GitHub",
       href: GITHUB_REPO_URL,
       className: "text-accent-a hover:text-accent-a-hover",
       description: t("page-index:page-index-join-action-github-description"),
+      eventName: "GitHub",
     },
     {
       Svg: FaDiscord,
       label: "Discord",
       href: "/discord/",
       className: "text-primary hover:text-primary-hover",
       description: t("page-index:page-index-join-action-discord-description"),
+      eventName: "Discord",
     },
     {
       Svg: FaXTwitter,
       label: "X",
       href: "https://x.com/EthDotOrg",
       className: "text-accent-b hover:text-accent-b-hover",
       description: t("page-index:page-index-join-action-twitter-description"),
+      eventName: "Twitter",
     },
   ]
 

src/components/MdComponents/index.tsx

@@ -27,6 +27,7 @@ import LocaleDateTime from "../LocaleDateTime"
 import MainArticle from "../MainArticle"
 import { StandaloneQuizWidget } from "../Quiz/QuizWidget"
 import { ButtonLink } from "../ui/buttons/Button"
+import { Divider } from "../ui/divider"
 import { Flex } from "../ui/flex"
 import { ListItem, OrderedList, UnorderedList } from "../ui/list"
 import { mdxTableComponents } from "../ui/Table"
@@ -180,10 +181,6 @@ export const MobileButtonDropdown = ({
   <StyledButtonDropdown className={cn("mb-0", className)} {...props} />
 )
 
-export const Divider = () => (
-  <div className="my-16 h-1 w-[10%] bg-primary-high-contrast" />
-)
-
 // All custom React components
 export const reactComponents = {
   Badge,