From c8a98964a47ade1fc0b66e7591b566c01be3c211 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 6 Jun 2025 16:34:11 -0700 Subject: [PATCH 01/11] feat: add simple CopyButton --- src/components/CopyToClipboard.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/CopyToClipboard.tsx b/src/components/CopyToClipboard.tsx index 93c8e9a6053..96e10698f6b 100644 --- a/src/components/CopyToClipboard.tsx +++ b/src/components/CopyToClipboard.tsx @@ -1,7 +1,12 @@ "use client" +import { BsCopy } from "react-icons/bs" +import { FaRegCheckCircle } from "react-icons/fa" + import { cn } from "@/lib/utils/cn" +import { Button, type ButtonProps } from "./ui/buttons/Button" + import { useClipboard } from "@/hooks/useClipboard" export type CopyToClipboardProps = { @@ -27,4 +32,17 @@ const CopyToClipboard = ({ ) } +type CopyButtonProps = ButtonProps & { + message: string +} + +export const CopyButton = ({ message, ...props }: CopyButtonProps) => { + const { onCopy, hasCopied } = useClipboard({ timeout: 1500 }) + return ( + + ) +} + export default CopyToClipboard From a3484240c11a839bcf59301add8e97e22c384b1c Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 6 Jun 2025 16:41:05 -0700 Subject: [PATCH 02/11] feat: speedrun to top, add quickstarts --- app/[locale]/developers/page.tsx | 94 ++++++++++++++++++++++++-------- 1 file changed, 70 insertions(+), 24 deletions(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index fbfacae25e5..249ea01c2af 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -5,13 +5,15 @@ import { Lang } from "@/lib/types" import { ChildOnlyProp } from "@/lib/types" import CalloutSSR from "@/components/CalloutSSR" -import Card from "@/components/Card" +import OldCard from "@/components/Card" +import { CopyButton } from "@/components/CopyToClipboard" import FeedbackCard from "@/components/FeedbackCard" import HubHero from "@/components/Hero/HubHero" import { Image } from "@/components/Image" import MainArticle from "@/components/MainArticle" import { ButtonLink } from "@/components/ui/buttons/Button" -import { Flex, Stack, VStack } from "@/components/ui/flex" +import { Card } from "@/components/ui/card" +import { Flex, VStack } from "@/components/ui/flex" import InlineLink from "@/components/ui/Link" import { cn } from "@/lib/utils/cn" @@ -131,6 +133,17 @@ const DevelopersPage = async ({ }, ] + const quickstarts = [ + { + description: "Quickstart a smart contract", + command: "npx create-eth@latest", + }, + { + description: "Quickstart a wallet-enabled front end", + command: "npm init @rainbow-me/rainbowkit@latest", + }, + ] + return ( {t("page-developers-get-started")} + +
+
+ SpeedRunEthereum banner +
+

Start experimenting

+

+ Hands-on challenges such as building NFTs, DEXs in a + step-by-step tutorial series. +

+ + {t("page-developers-speedrunethereum-link")} + +
+
+ + +

Jump right into the code

+
+ {quickstarts.map(({ description, command }) => ( +
+
{description}
+
+
{command}
+ +
+
+ ))} +
+
+ + Read the Solidity docs + +
+
+
{paths.map((path, idx) => ( - {path.button} - + ))}
-
- SpeedRunEthereum banner - -

{t("page-developers-speedrunethereum-title")}

- - {t("page-developers-speedrunethereum-link")} - -
-
-

{t("page-developers-about")}

From 78e2ff0f86f180d33fd0bad404e3ccd981630475 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 6 Jun 2025 16:47:20 -0700 Subject: [PATCH 03/11] intl: extract strings --- app/[locale]/developers/page.tsx | 13 +++++-------- src/intl/en/page-developers-index.json | 5 +++++ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index 249ea01c2af..a722df95046 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -135,11 +135,11 @@ const DevelopersPage = async ({ const quickstarts = [ { - description: "Quickstart a smart contract", + description: t("page-developers-quickstart-2-description"), command: "npx create-eth@latest", }, { - description: "Quickstart a wallet-enabled front end", + description: t("page-developers-quickstart-2-description"), command: "npm init @rainbow-me/rainbowkit@latest", }, ] @@ -170,11 +170,8 @@ const DevelopersPage = async ({ style={{ width: "100vw", objectFit: "cover" }} />
-

Start experimenting

-

- Hands-on challenges such as building NFTs, DEXs in a - step-by-step tutorial series. -

+

{t("page-developers-start-experimenting")}

+

{t("page-developers-speedrunethereum-description")}

-

Jump right into the code

+

{t("page-developers-jump-right-in-title")}

{quickstarts.map(({ description, command }) => (
diff --git a/src/intl/en/page-developers-index.json b/src/intl/en/page-developers-index.json index f03059ed36b..dbf68bb2c9d 100644 --- a/src/intl/en/page-developers-index.json +++ b/src/intl/en/page-developers-index.json @@ -41,6 +41,7 @@ "page-developers-intro-stack-desc": "An introduction to the Ethereum stack", "page-developers-js-libraries-desc": "Using JavaScript to interact with smart contracts", "page-developers-js-libraries-link": "JavaScript libraries", + "page-developers-jump-right-in-title": "Jump right into the code", "page-developers-language-desc": "Using Ethereum with familiar languages", "page-developers-languages": "Programming languages", "page-developers-learn": "Learn Ethereum development", @@ -62,6 +63,8 @@ "page-developers-oracle-desc": "Getting offchain data into your smart contracts", "page-developers-oracles-link": "Oracles", "page-developers-play-code": "Play with code", + "page-developers-quickstart-1-description": "Quickstart a smart contract", + "page-developers-quickstart-2-description": "Quickstart a wallet-enabled front end", "page-developers-read-docs": "Read the docs", "page-developers-scaling-desc": "Solutions for faster transactions", "page-developers-scaling-link": "Scaling", @@ -72,10 +75,12 @@ "page-developers-smart-contracts-desc": "The logic behind dapps – self-executing agreements", "page-developers-smart-contracts-link": "Smart contracts", "page-developers-speedrunethereum-title": "Learn all the most important concepts by building on Ethereum", + "page-developers-speedrunethereum-description": "Hands-on challenges such as building NFTs, DEXs in a step-by-step tutorial series.", "page-developers-speedrunethereum-link": "SpeedRun Ethereum", "page-developers-stack": "The stack", "page-developers-start": "Start experimenting", "page-developers-start-desc": "Want to experiment first, ask questions later?", + "page-developers-start-experimenting": "Start experimenting", "page-developers-storage-desc": "How to handle dapp storage", "page-developers-storage-link": "Storage", "page-developers-subtitle": "A builders manual for Ethereum. By builders, for builders.", From 65ef3a2fe96beacfb1e7c3a2d90b75d500de5d9e Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 6 Jun 2025 17:11:28 -0700 Subject: [PATCH 04/11] patch: mobile spacing --- app/[locale]/developers/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index f6142925a54..b257fc4537a 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -133,7 +133,7 @@ const DevelopersPage = async ({ sizes="100vw" style={{ width: "100vw", objectFit: "cover" }} /> -
+

{t("page-developers-start-experimenting")}

{t("page-developers-speedrunethereum-description")}

- +

{t("page-developers-jump-right-in-title")}

{quickstarts.map(({ description, command }) => ( From 37e856153b45677493efe75dddf08343a3e390d1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 6 Jun 2025 17:22:20 -0700 Subject: [PATCH 05/11] intl: fix two strings --- app/[locale]/developers/page.tsx | 4 ++-- src/intl/en/page-developers-index.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index b257fc4537a..e6d725c1169 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -134,7 +134,7 @@ const DevelopersPage = async ({ style={{ width: "100vw", objectFit: "cover" }} />
-

{t("page-developers-start-experimenting")}

+

{t("page-developers-start")}

{t("page-developers-speedrunethereum-description")}

- Read the Solidity docs + {t("page-developers-solidity-docs")}
diff --git a/src/intl/en/page-developers-index.json b/src/intl/en/page-developers-index.json index dbf68bb2c9d..35f4c78654d 100644 --- a/src/intl/en/page-developers-index.json +++ b/src/intl/en/page-developers-index.json @@ -74,13 +74,13 @@ "page-developers-setup-desc": "Get your stack ready for building by configuring a development environment.", "page-developers-smart-contracts-desc": "The logic behind dapps – self-executing agreements", "page-developers-smart-contracts-link": "Smart contracts", + "page-developers-solidity-docs": "Read the Solidity docs", "page-developers-speedrunethereum-title": "Learn all the most important concepts by building on Ethereum", "page-developers-speedrunethereum-description": "Hands-on challenges such as building NFTs, DEXs in a step-by-step tutorial series.", "page-developers-speedrunethereum-link": "SpeedRun Ethereum", "page-developers-stack": "The stack", "page-developers-start": "Start experimenting", "page-developers-start-desc": "Want to experiment first, ask questions later?", - "page-developers-start-experimenting": "Start experimenting", "page-developers-storage-desc": "How to handle dapp storage", "page-developers-storage-link": "Storage", "page-developers-subtitle": "A builders manual for Ethereum. By builders, for builders.", From 9cbbaa93d589811cbe4a3ceb66bb93638d1e96ce Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 6 Jun 2025 18:00:02 -0700 Subject: [PATCH 06/11] patch: update label, make unique --- app/[locale]/developers/page.tsx | 24 ++++++++++++------------ src/intl/en/page-developers-index.json | 1 + 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index e6d725c1169..bf81ae62c0b 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -65,6 +65,17 @@ const DevelopersPage = async ({ namespace: "common", }) + const quickstarts = [ + { + description: t("page-developers-quickstart-2-description"), + command: "npx create-eth@latest", + }, + { + description: t("page-developers-quickstart-2-description"), + command: "npm init @rainbow-me/rainbowkit@latest", + }, + ] + const paths: DevelopersPath[] = [ { emoji: ":woman_student:", @@ -82,7 +93,7 @@ const DevelopersPage = async ({ }, { emoji: ":woman_scientist:", - title: t("page-developers-start"), + title: t("page-developers-resources"), description: t("page-developers-start-desc"), url: "/developers/learning-tools/", button: t("page-developers-play-code"), @@ -96,17 +107,6 @@ const DevelopersPage = async ({ }, ] - const quickstarts = [ - { - description: t("page-developers-quickstart-2-description"), - command: "npx create-eth@latest", - }, - { - description: t("page-developers-quickstart-2-description"), - command: "npm init @rainbow-me/rainbowkit@latest", - }, - ] - return ( Date: Fri, 6 Jun 2025 20:16:24 -0700 Subject: [PATCH 07/11] fix: string key --- app/[locale]/developers/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index bf81ae62c0b..4bf31e28eb7 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -67,7 +67,7 @@ const DevelopersPage = async ({ const quickstarts = [ { - description: t("page-developers-quickstart-2-description"), + description: t("page-developers-quickstart-1-description"), command: "npx create-eth@latest", }, { From df1c4e08e688d39ac9a16a78a20d9caa57132034 Mon Sep 17 00:00:00 2001 From: Jakub <100724231+konopkja@users.noreply.github.com> Date: Tue, 10 Jun 2025 12:46:40 +0200 Subject: [PATCH 08/11] Update page-developers-index.json --- src/intl/en/page-developers-index.json | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/intl/en/page-developers-index.json b/src/intl/en/page-developers-index.json index cf4b9da3f74..806e0a7cae8 100644 --- a/src/intl/en/page-developers-index.json +++ b/src/intl/en/page-developers-index.json @@ -28,7 +28,6 @@ "page-developers-fundamentals": "Fundamentals", "page-developers-gas-desc": "Ether needed to power transactions", "page-developers-gas-link": "Gas", - "page-developers-get-started": "How would you like to get started?", "page-developers-improve-ethereum": "Help us make ethereum.org better", "page-developers-improve-ethereum-desc": "Like ethereum.org, these docs are a community effort. Create a PR if you see mistakes, room for improvement, or new opportunities to help Ethereum developers.", "page-developers-into-eth-desc": "An introduction to blockchain and Ethereum", @@ -41,7 +40,7 @@ "page-developers-intro-stack-desc": "An introduction to the Ethereum stack", "page-developers-js-libraries-desc": "Using JavaScript to interact with smart contracts", "page-developers-js-libraries-link": "JavaScript libraries", - "page-developers-jump-right-in-title": "Jump right into the code", + "page-developers-jump-right-in-title": "Quickstart", "page-developers-language-desc": "Using Ethereum with familiar languages", "page-developers-languages": "Programming languages", "page-developers-learn": "Learn Ethereum development", @@ -63,8 +62,8 @@ "page-developers-oracle-desc": "Getting offchain data into your smart contracts", "page-developers-oracles-link": "Oracles", "page-developers-play-code": "Play with code", - "page-developers-quickstart-1-description": "Quickstart a smart contract", - "page-developers-quickstart-2-description": "Quickstart a wallet-enabled front end", + "page-developers-quickstart-1-description": "Smart contract", + "page-developers-quickstart-2-description": "A wallet-enabled front end", "page-developers-read-docs": "Read the docs", "page-developers-resources": "Resources", "page-developers-scaling-desc": "Solutions for faster transactions", @@ -80,7 +79,7 @@ "page-developers-speedrunethereum-description": "Hands-on challenges such as building NFTs, DEXs in a step-by-step tutorial series.", "page-developers-speedrunethereum-link": "SpeedRun Ethereum", "page-developers-stack": "The stack", - "page-developers-start": "Start experimenting", + "page-developers-start": "Start with guided challenges", "page-developers-start-desc": "Want to experiment first, ask questions later?", "page-developers-storage-desc": "How to handle dapp storage", "page-developers-storage-link": "Storage", From a89beb91a385575dee63c47b6bde81d25a30af89 Mon Sep 17 00:00:00 2001 From: Jakub <100724231+konopkja@users.noreply.github.com> Date: Tue, 10 Jun 2025 13:00:39 +0200 Subject: [PATCH 09/11] Update page-developers-index.json --- src/intl/en/page-developers-index.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/intl/en/page-developers-index.json b/src/intl/en/page-developers-index.json index 806e0a7cae8..230060777f3 100644 --- a/src/intl/en/page-developers-index.json +++ b/src/intl/en/page-developers-index.json @@ -28,6 +28,7 @@ "page-developers-fundamentals": "Fundamentals", "page-developers-gas-desc": "Ether needed to power transactions", "page-developers-gas-link": "Gas", + "page-developers-get-started": "Experiment with Ethereum", "page-developers-improve-ethereum": "Help us make ethereum.org better", "page-developers-improve-ethereum-desc": "Like ethereum.org, these docs are a community effort. Create a PR if you see mistakes, room for improvement, or new opportunities to help Ethereum developers.", "page-developers-into-eth-desc": "An introduction to blockchain and Ethereum", From 800b8987f4e19c89370c9da1662252031257ab65 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 10 Jun 2025 09:44:40 -0700 Subject: [PATCH 10/11] feat: add top_boxes custom events --- app/[locale]/developers/page.tsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index 4bf31e28eb7..b6547b31291 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -69,10 +69,12 @@ const DevelopersPage = async ({ { description: t("page-developers-quickstart-1-description"), command: "npx create-eth@latest", + eventName: "scaffold", }, { description: t("page-developers-quickstart-2-description"), command: "npm init @rainbow-me/rainbowkit@latest", + eventName: "rainbowkit", }, ] @@ -140,6 +142,11 @@ const DevelopersPage = async ({ href="https://speedrunethereum.com/" size="lg" className="mt-4" + customEventOptions={{ + eventCategory: "top_boxes", + eventAction: "click", + eventName: "speedrun", + }} > {t("page-developers-speedrunethereum-link")} @@ -149,12 +156,20 @@ const DevelopersPage = async ({

{t("page-developers-jump-right-in-title")}

- {quickstarts.map(({ description, command }) => ( + {quickstarts.map(({ description, command, eventName }) => (
{description}
{command}
- +
))} @@ -164,6 +179,11 @@ const DevelopersPage = async ({ href="https://docs.soliditylang.org/en/latest/" variant="outline" className="bg-background" + customEventOptions={{ + eventCategory: "top_boxes", + eventAction: "click", + eventName: "solidity", + }} > {t("page-developers-solidity-docs")} From f4b41b1083786e3a5cda71d007ab0100bf8cb4e2 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 10 Jun 2025 11:24:28 -0700 Subject: [PATCH 11/11] chore: update copy --- app/[locale]/developers/page.tsx | 60 ++++++++++++-------------- src/intl/en/page-developers-index.json | 6 +-- 2 files changed, 30 insertions(+), 36 deletions(-) diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index b6547b31291..25203069135 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -14,6 +14,7 @@ import MainArticle from "@/components/MainArticle" import { ButtonLink } from "@/components/ui/buttons/Button" import { Card } from "@/components/ui/card" import { VStack } from "@/components/ui/flex" +import Link from "@/components/ui/Link" import InlineLink from "@/components/ui/Link" import { getMetadata } from "@/lib/utils/metadata" @@ -65,19 +66,6 @@ const DevelopersPage = async ({ namespace: "common", }) - const quickstarts = [ - { - description: t("page-developers-quickstart-1-description"), - command: "npx create-eth@latest", - eventName: "scaffold", - }, - { - description: t("page-developers-quickstart-2-description"), - command: "npm init @rainbow-me/rainbowkit@latest", - eventName: "rainbowkit", - }, - ] - const paths: DevelopersPath[] = [ { emoji: ":woman_student:", @@ -156,29 +144,35 @@ const DevelopersPage = async ({

{t("page-developers-jump-right-in-title")}

- {quickstarts.map(({ description, command, eventName }) => ( -
-
{description}
-
-
{command}
- -
+
+

Scaffold-ETH 2

+

+ {t("page-developers-quickstart-scaffold-subtext")}{" "} + + {t("page-developers-quickstart-scaffold-docs")} + +

+
+ + npx create-eth@latest + +
- ))} +
+
- Need to learn the language?

+ {t("page-developers-solidity-docs")} -
+
diff --git a/src/intl/en/page-developers-index.json b/src/intl/en/page-developers-index.json index 230060777f3..524d5fb7694 100644 --- a/src/intl/en/page-developers-index.json +++ b/src/intl/en/page-developers-index.json @@ -41,7 +41,7 @@ "page-developers-intro-stack-desc": "An introduction to the Ethereum stack", "page-developers-js-libraries-desc": "Using JavaScript to interact with smart contracts", "page-developers-js-libraries-link": "JavaScript libraries", - "page-developers-jump-right-in-title": "Quickstart", + "page-developers-jump-right-in-title": "Quickstart your idea", "page-developers-language-desc": "Using Ethereum with familiar languages", "page-developers-languages": "Programming languages", "page-developers-learn": "Learn Ethereum development", @@ -63,8 +63,8 @@ "page-developers-oracle-desc": "Getting offchain data into your smart contracts", "page-developers-oracles-link": "Oracles", "page-developers-play-code": "Play with code", - "page-developers-quickstart-1-description": "Smart contract", - "page-developers-quickstart-2-description": "A wallet-enabled front end", + "page-developers-quickstart-scaffold-subtext": "Bootstrap your Ethereum app stack in seconds.", + "page-developers-quickstart-scaffold-docs": "Read Scaffold-ETH 2 docs", "page-developers-read-docs": "Read the docs", "page-developers-resources": "Resources", "page-developers-scaling-desc": "Solutions for faster transactions",