+
-
-
-
- {t("page-index:page-index-title")}
-
- {t("page-index:page-index-description")}
-
- {t("page-index:page-index-title-button")}
-
-
-
-
-
+
+
+
+
)
}
From 27ece812772e7d2b781451323469d5c4e58ed4f5 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 09:15:43 -0700
Subject: [PATCH 005/273] chore: import icon svg assets
---
src/components/icons/choose-network-icon.svg | 3 ++
src/components/icons/get-eth-icon.svg | 39 +++++++++++++++++++
src/components/icons/pick-wallet-icon.svg | 40 ++++++++++++++++++++
src/components/icons/try-apps-icon.svg | 13 +++++++
4 files changed, 95 insertions(+)
create mode 100644 src/components/icons/choose-network-icon.svg
create mode 100644 src/components/icons/get-eth-icon.svg
create mode 100644 src/components/icons/pick-wallet-icon.svg
create mode 100644 src/components/icons/try-apps-icon.svg
diff --git a/src/components/icons/choose-network-icon.svg b/src/components/icons/choose-network-icon.svg
new file mode 100644
index 00000000000..22706cd00bd
--- /dev/null
+++ b/src/components/icons/choose-network-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/icons/get-eth-icon.svg b/src/components/icons/get-eth-icon.svg
new file mode 100644
index 00000000000..3fd9af8a4fc
--- /dev/null
+++ b/src/components/icons/get-eth-icon.svg
@@ -0,0 +1,39 @@
+
diff --git a/src/components/icons/pick-wallet-icon.svg b/src/components/icons/pick-wallet-icon.svg
new file mode 100644
index 00000000000..2e3235b664e
--- /dev/null
+++ b/src/components/icons/pick-wallet-icon.svg
@@ -0,0 +1,40 @@
+
diff --git a/src/components/icons/try-apps-icon.svg b/src/components/icons/try-apps-icon.svg
new file mode 100644
index 00000000000..bce0c5b9cd3
--- /dev/null
+++ b/src/components/icons/try-apps-icon.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
From 51e1532304bd22d13bad3ecf6c98304dcd428262 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 12:16:14 -0700
Subject: [PATCH 006/273] theme: add accent color tokens
---
src/styles/global.css | 4 ++++
tailwind.config.ts | 5 +++++
2 files changed, 9 insertions(+)
diff --git a/src/styles/global.css b/src/styles/global.css
index 0f2feb38570..7c15de51d54 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -93,6 +93,10 @@
--background: white;
--background-highlight: var(--gray-100);
+ --accent-a: #C32E8A;
+ --accent-b: #3C4CEB;
+ --accent-c: #29948F;
+
--disabled: var(--gray-400);
/* ! Deprecating neutral */
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5e6cb29630a..c2b5b6612a1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -48,6 +48,11 @@ const config = {
dark: "var(--primary-dark)",
pressed: "var(--primary-pressed)",
},
+ accent: {
+ a: "var(--accent-a)",
+ b: "var(--accent-b)",
+ c: "var(--accent-c)",
+ },
body: {
DEFAULT: "var(--body)",
medium: "var(--body-medium)",
From 2fa1e0f6e81db47e075147f610c29096bc989790 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 12:17:43 -0700
Subject: [PATCH 007/273] create: SvgButtonLink component
---
src/components/Buttons/SvgButtonLink.tsx | 34 ++++++++++++++++++++++++
1 file changed, 34 insertions(+)
create mode 100644 src/components/Buttons/SvgButtonLink.tsx
diff --git a/src/components/Buttons/SvgButtonLink.tsx b/src/components/Buttons/SvgButtonLink.tsx
new file mode 100644
index 00000000000..23303594575
--- /dev/null
+++ b/src/components/Buttons/SvgButtonLink.tsx
@@ -0,0 +1,34 @@
+import { FunctionComponent, ReactNode, SVGProps } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+type SvgButtonLinkProps = {
+ Svg: FunctionComponent
+
+ {t("page-index:page-index-title")}
++ The leading platform for innovative apps and Ethereum-backed + blockchain networks +
+
+
+
+)
+
+export default SvgButtonLink
From d9c16a79608a1ba1ce1809d880c1cb611fda4f25 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 12:18:43 -0700
Subject: [PATCH 008/273] feat: implement subhero CTAs
---
src/pages/index.tsx | 53 +++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 51 insertions(+), 2 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ba4ef4e4847..c51777462a3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -24,10 +24,15 @@ import type { CodeExample, CommunityEventsReturnType } from "@/lib/interfaces"
import ActionCard from "@/components/ActionCard"
import ButtonLink from "@/components/Buttons/ButtonLink"
+import SvgButtonLink from "@/components/Buttons/SvgButtonLink"
import CalloutBanner from "@/components/CalloutBanner"
import CodeModal from "@/components/CodeModal"
import CommunityEvents from "@/components/CommunityEvents"
import HomeHero from "@/components/Hero/HomeHero"
+import ChooseNetworkIcon from "@/components/icons/choose-network-icon.svg"
+import GetEthIcon from "@/components/icons/get-eth-icon.svg"
+import PickWalletIcon from "@/components/icons/pick-wallet-icon.svg"
+import TryAppsIcon from "@/components/icons/try-apps-icon.svg"
import { Image } from "@/components/Image"
import LazyLoadComponent from "@/components/LazyLoadComponent"
import MainArticle from "@/components/MainArticle"
@@ -356,6 +361,37 @@ const HomePage = ({
const cardBoxShadow = useToken("colors", "cardBoxShadow")
+ const SubHeroCTAs = [
+ {
+ label: "Pick a wallet",
+ description: "Create accounts, manage assets",
+ href: "/wallets/find-wallet/",
+ Svg: PickWalletIcon,
+ colorClass: "text-primary",
+ },
+ {
+ label: "Get ETH",
+ description: "The currency of Ethereum",
+ href: "/get-eth/",
+ Svg: GetEthIcon,
+ colorClass: "text-accent-a",
+ },
+ {
+ label: "Choose a network",
+ description: "Enjoy minimal fees",
+ href: "/layer-2/", // TODO: Update with new networks page when ready
+ Svg: ChooseNetworkIcon,
+ colorClass: "text-accent-b",
+ },
+ {
+ label: "Try apps",
+ description: "See what Ethereum can do",
+ href: "/dapps/",
+ Svg: TryAppsIcon,
+ colorClass: "text-accent-c",
+ },
+ ]
+
return (
+
+
+
+
+ {label}
+{children}
+
+ {SubHeroCTAs.map(({ label, description, href, colorClass, Svg }) => (
+
+ {description}
+
+ ))}
+
{/* Getting Started Section */}
+ {tag &&
+ ))}
{tag}
} +{header}
+
+
+ )
+}
+
+export default HomeSection
From 22cd484ad7293b37b6b74306fbb8ee2ecc3e3423 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 14:31:05 -0700
Subject: [PATCH 013/273] init: template activity home section
---
src/pages/index.tsx | 31 +++++++++++++++++++++++++++++++
1 file changed, 31 insertions(+)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d5fcc25c1a2..9f86e7a39af 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,6 +9,7 @@ import type { CodeExample, CommunityEventsReturnType } from "@/lib/interfaces"
import SvgButtonLink from "@/components/Buttons/SvgButtonLink"
import HomeHero from "@/components/Hero/HomeHero"
+import HomeSection from "@/components/HomeSection"
import EthTokenIcon from "@/components/icons/eth-token.svg"
import PickWalletIcon from "@/components/icons/eth-wallet.svg"
import ChooseNetworkIcon from "@/components/icons/network-layers.svg"
@@ -37,6 +38,7 @@ import { fetchNodes } from "@/lib/api/fetchNodes"
import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked"
import { fetchTotalValueLocked } from "@/lib/api/fetchTotalValueLocked"
import { fetchTxCount } from "@/lib/api/fetchTxCount"
+import activityImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
import hero from "@/public/images/home/hero.png"
const cachedFetchCommunityEvents = runOnlyOnce(fetchCommunityEvents)
@@ -221,6 +223,35 @@ const HomePage = ({
))}
+
+
+
+
+ {tag}
+
+ {title}
+ {children} +
+
+ Activity from all the Ethereum networks
+
+
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
From 223e0364f633497cd342271079f4c394cf7343cf Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 14:41:43 -0700
Subject: [PATCH 014/273] fix: text alignment
---
src/components/Buttons/SvgButtonLink.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/Buttons/SvgButtonLink.tsx b/src/components/Buttons/SvgButtonLink.tsx
index 23303594575..d888841077b 100644
--- a/src/components/Buttons/SvgButtonLink.tsx
+++ b/src/components/Buttons/SvgButtonLink.tsx
@@ -23,7 +23,7 @@ const SvgButtonLink = ({
-
+
From 91c96974a8e7dfcd0eacc8174644d548fa5d9dcc Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 14:51:58 -0700
Subject: [PATCH 015/273] feat: use HomeSection, pass section images
---
src/components/HomeSection/index.tsx | 12 ++++-----
src/pages/index.tsx | 37 +++++++++++++++++-----------
2 files changed, 29 insertions(+), 20 deletions(-)
diff --git a/src/components/HomeSection/index.tsx b/src/components/HomeSection/index.tsx
index 73b5f1f1af3..3b478cdb043 100644
--- a/src/components/HomeSection/index.tsx
+++ b/src/components/HomeSection/index.tsx
@@ -6,8 +6,8 @@ import { cn } from "@/lib/utils/cn"
type HomeSectionProps = {
tag: string
title: ReactNode
- imgSrc: StaticImageData
- reverse?: boolean
+ imgSrc?: StaticImageData // TODO: Revert to required before prod
+ imageLast?: boolean
className?: string
children?: ReactNode
}
@@ -16,7 +16,7 @@ const HomeSection = ({
tag,
title,
imgSrc,
- reverse,
+ imageLast,
className,
children,
}: HomeSectionProps) => {
@@ -24,14 +24,14 @@ const HomeSection = ({
{label}
{children}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9f86e7a39af..c25aeaf8cbb 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -38,7 +38,10 @@ import { fetchNodes } from "@/lib/api/fetchNodes"
import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked"
import { fetchTotalValueLocked } from "@/lib/api/fetchTotalValueLocked"
import { fetchTxCount } from "@/lib/api/fetchTxCount"
+import buildersImage from "@/public/images/heroes/developers-hub-hero.jpg"
import activityImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
+import learnImage from "@/public/images/heroes/learn-hub-hero.png"
+import communityImage from "@/public/images/heroes/quizzes-hub-hero.png"
import hero from "@/public/images/home/hero.png"
const cachedFetchCommunityEvents = runOnlyOnce(fetchCommunityEvents)
@@ -170,29 +173,33 @@ const HomePage = ({
const comingSoon = [
{
- header: "A new way to use the internet",
+ title: "A new way to use the internet",
tag: "Use cases",
},
{
- header: "The strongest ecosystem",
+ title: "The strongest ecosystem",
tag: "Activity",
+ imgSrc: activityImage,
},
{
- header: "Understanding Ethereum",
+ title: "Understanding Ethereum",
tag: "Learn",
+ imgSrc: learnImage,
},
- { header: "The internet is changing" },
+ { title: "The internet is changing" },
{
- header: "Bockchain's biggest builder community",
+ title: "Bockchain's biggest builder community",
tag: "Builders",
+ imgSrc: buildersImage,
},
{
- header: "Built by the community",
+ title: "Built by the community",
tag: "Ethereum.org community",
+ imgSrc: communityImage,
},
- { header: "Ethereum news" },
- { header: "Ethereum events" },
- { header: "Join ethereum.org" },
+ { title: "Ethereum news" },
+ { title: "Ethereum events" },
+ { title: "Join ethereum.org" },
]
return (
{/* Temporary coming soon section template */}
- {comingSoon.map(({ header, tag }: { header: string; tag?: string }) => (
-
)
From 10de68ffbebb886c7873ae4f47de80557adf8032 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 14:56:34 -0700
Subject: [PATCH 016/273] refactor: move padding to container level
---
src/components/HomeSection/index.tsx | 2 +-
src/pages/index.tsx | 97 ++++++++++++++--------------
2 files changed, 51 insertions(+), 48 deletions(-)
diff --git a/src/components/HomeSection/index.tsx b/src/components/HomeSection/index.tsx
index 3b478cdb043..de27394049f 100644
--- a/src/components/HomeSection/index.tsx
+++ b/src/components/HomeSection/index.tsx
@@ -23,7 +23,7 @@ const HomeSection = ({
return (
-
- {tag &&
+ {comingSoon.map(({ title, tag, imgSrc }) => (
+ {tag}
} -{header}
-
- {SubHeroCTAs.map(({ label, description, href, colorClass, Svg }) => (
-
- {description}
-
- ))}
-
-
-
Activity from all the Ethereum networks
-
-
+
-
- $44.89B
-Total value held on Ethereum [More info icon]
-
-
- $44.89B
-Total value held on Ethereum [More info icon]
-
-
- $44.89B
-Total value held on Ethereum [More info icon]
-
-
- $44.89B
-Total value held on Ethereum [More info icon]
-
+
)
}
From fe2654cdbcf357baba1637bb38712dc35a60b8d6 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 16:37:40 -0700
Subject: [PATCH 017/273] style: HomeSection and heading theming
---
src/components/HomeSection/index.tsx | 19 ++++++++++++++-----
tailwind.config.ts | 1 +
2 files changed, 15 insertions(+), 5 deletions(-)
diff --git a/src/components/HomeSection/index.tsx b/src/components/HomeSection/index.tsx
index de27394049f..688d7830b7b 100644
--- a/src/components/HomeSection/index.tsx
+++ b/src/components/HomeSection/index.tsx
@@ -23,21 +23,30 @@ const HomeSection = ({
return (
+ {SubHeroCTAs.map(({ label, description, href, colorClass, Svg }) => (
+
+ {description}
+
+ ))}
-
- {/* Temporary coming soon section template */}
- {comingSoon.map(({ title, tag, imgSrc }) => (
+
+
+
+ {/* Temporary coming soon section template */}
+ {comingSoon.map(({ title, tag, imgSrc }) => (
+ Activity from all the Ethereum networks
+
+
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
+
+ $44.89B
+Total value held on Ethereum [More info icon]
+
+
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4eebdabb71a..0b68381d5a6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,6 +16,7 @@ const config = {
monospace: "var(--font-mono)",
},
fontSize: {
+ "7xl": ["4rem", "1.1"], // [7xl, 6xs]
"6xl": ["3.75rem", "1.2"], // [6xl, 4xs]
"5xl": ["3rem", "1.2"], // [5xl, 4xs]
"4xl": ["2.25rem", "1.2"], // [4xl, 4xs]
From a6dce124d487a088a2df6e254a6d584b717cc6d1 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 19:12:30 -0700
Subject: [PATCH 018/273] feat: add BigNumber component
---
src/components/BigNumber/index.tsx | 53 ++++++++++++++++++++++++++++++
1 file changed, 53 insertions(+)
create mode 100644 src/components/BigNumber/index.tsx
diff --git a/src/components/BigNumber/index.tsx b/src/components/BigNumber/index.tsx
new file mode 100644
index 00000000000..70a9a659cc1
--- /dev/null
+++ b/src/components/BigNumber/index.tsx
@@ -0,0 +1,53 @@
+import { type ReactNode } from "react"
+import { MdInfoOutline } from "react-icons/md"
+
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+
+import { cn } from "@/lib/utils/cn"
+
+import { BaseLink } from "../Link"
+
+type BigNumberProps = {
+ children: ReactNode
+ value: ReactNode
+ sourceName?: string
+ sourceUrl?: string
+ className?: string
+}
+
+const BigNumber = ({
+ children,
+ value,
+ sourceName,
+ sourceUrl,
+ className,
+}: BigNumberProps) => {
+ return (
+
{tag}
- {title}
+{title}
{children}
+
+ )
+}
+export default BigNumber
From 121dc0d0bbe74bc11ea0b7bf604e1ffc0b0bd649 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 19:14:18 -0700
Subject: [PATCH 019/273] iter: implement new stat box with dummy data
---
src/pages/index.tsx | 84 ++++++++++++++++++++++++++-------------------
1 file changed, 48 insertions(+), 36 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 926e90f9a2a..22c1a9c1275 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,6 +7,7 @@ import { Flex } from "@chakra-ui/react"
import { AllMetricData, BasePageProps, Lang } from "@/lib/types"
import type { CodeExample, CommunityEventsReturnType } from "@/lib/interfaces"
+import BigNumber from "@/components/BigNumber"
import SvgButtonLink from "@/components/Buttons/SvgButtonLink"
import HomeHero from "@/components/Hero/HomeHero"
import HomeSection from "@/components/HomeSection"
@@ -176,17 +177,13 @@ const HomePage = ({
title: "A new way to use the internet",
tag: "Use cases",
},
- {
- title: "The strongest ecosystem",
- tag: "Activity",
- imgSrc: activityImage,
- },
{
title: "Understanding Ethereum",
tag: "Learn",
imgSrc: learnImage,
+ imageLast: true,
},
- { title: "The internet is changing" },
+ { title: "The internet is changing", tag: "" },
{
title: "Bockchain's biggest builder community",
tag: "Builders",
@@ -196,10 +193,11 @@ const HomePage = ({
title: "Built by the community",
tag: "Ethereum.org community",
imgSrc: communityImage,
+ imageLast: true,
},
- { title: "Ethereum news" },
- { title: "Ethereum events" },
- { title: "Join ethereum.org" },
+ { title: "Ethereum news", tag: "" },
+ { title: "Ethereum events", tag: "" },
+ { title: "Join ethereum.org", tag: "" },
]
return (
{value}
+
+ {children}
+ {sourceName && sourceUrl && (
+
+
+
+
+ {sourceName}
+
+
+ )}
+
+
+
Date: Sun, 28 Jul 2024 12:48:08 -0700
Subject: [PATCH 026/273] fix: image positioning for flipped
---
src/components/HomeSection/index.tsx | 12 ++++++++++--
src/pages/index.tsx | 5 +++--
2 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/components/HomeSection/index.tsx b/src/components/HomeSection/index.tsx
index d0b2e96e581..9760a57d164 100644
--- a/src/components/HomeSection/index.tsx
+++ b/src/components/HomeSection/index.tsx
@@ -7,6 +7,7 @@ type HomeSectionProps = {
tag: string
title: ReactNode
imgSrc?: StaticImageData // TODO: Revert to required before prod
+ isFlipped?: boolean
className?: string
children?: ReactNode
}
@@ -15,17 +16,24 @@ const HomeSection = ({
tag,
title,
imgSrc,
+ isFlipped,
className,
children,
}: HomeSectionProps) => {
return (
-
{SubHeroCTAs.map(({ label, description, href, colorClass, Svg }) => (
-
From e616586e0649b800ee0743645bf3b9e070e3816d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 20:33:25 -0700
Subject: [PATCH 021/273] theme: add 128 token
---
tailwind.config.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0b68381d5a6..7ee6855fc9b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -113,6 +113,7 @@ const config = {
10.5: "2.625rem",
19: "4.75rem", // Nav height
31: "7.75rem", // FeedbackWidget conditional bottom offset
+ 128: "32rem",
},
keyframes: {
"accordion-down": {
From 8875bffc4e2da93f60c21d740d5f6c89e464b76e Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 20:34:14 -0700
Subject: [PATCH 022/273] update: HomeSection component
---
src/components/HomeSection/index.tsx | 23 +++--------------------
1 file changed, 3 insertions(+), 20 deletions(-)
diff --git a/src/components/HomeSection/index.tsx b/src/components/HomeSection/index.tsx
index 688d7830b7b..9b012bb7edc 100644
--- a/src/components/HomeSection/index.tsx
+++ b/src/components/HomeSection/index.tsx
@@ -7,7 +7,6 @@ type HomeSectionProps = {
tag: string
title: ReactNode
imgSrc?: StaticImageData // TODO: Revert to required before prod
- imageLast?: boolean
className?: string
children?: ReactNode
}
@@ -16,33 +15,17 @@ const HomeSection = ({
tag,
title,
imgSrc,
- imageLast,
className,
children,
}: HomeSectionProps) => {
return (
-
- >
- label: string
+ label?: string
children: ReactNode
href: string
className?: string
@@ -24,8 +24,8 @@ const SvgButtonLink = ({
Activity from all the Ethereum networks
-
-
From 5932f6048e6647f20e2526a9a77cf03f3b9738c3 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 20:33:14 -0700
Subject: [PATCH 020/273] Update SvgButtonLink.tsx
---
src/components/Buttons/SvgButtonLink.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/Buttons/SvgButtonLink.tsx b/src/components/Buttons/SvgButtonLink.tsx
index d888841077b..f2e1a9bd7b6 100644
--- a/src/components/Buttons/SvgButtonLink.tsx
+++ b/src/components/Buttons/SvgButtonLink.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils/cn"
type SvgButtonLinkProps = {
Svg: FunctionComponent
-
- $44.89B
-Total value held on Ethereum [More info icon]
-
-
- $44.89B
-Total value held on Ethereum [More info icon]
-
-
- $44.89B
-Total value held on Ethereum [More info icon]
-
-
+ $44.89B
-Total value held on Ethereum [More info icon]
-
+
{/* Temporary coming soon section template */}
- {comingSoon.map(({ title, tag, imgSrc }) => (
- + Activity from all Ethereum networks +
+
+ {/* TODO: Plug in real data */}
+
+ Total value held on Ethereum
+
+
+
+ Transactions in the last 24h
+
+
+
+ Average transaction cost
+
+
+
+ Value protecting Ethereum
+
-
{label}
-{children}
+ {label &&{label}
} + {children}
+
+ 👷♀️🚧🔜
+
+
+
+ 👷♀️🚧🔜
+
+
+
+ 👷♀️🚧🔜
+
+
+
+ 👷♀️🚧🔜
+
+
{/* Temporary coming soon section template */}
{comingSoon.map((item) => (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bee0f7cf042..5ba3153a6a2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -343,7 +343,27 @@ const HomePage = ({
title="Blockchain's biggest builder community"
imgSrc={buildersImage}
>
- 👷♀️🚧🔜
+
+
+
+
+
{/* Temporary coming soon section template */}
{comingSoon.map((item) => (
+
{tag}
From 56f19900b033dd65554f93a7b8ebcb7515764375 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 27 Jul 2024 20:34:33 -0700
Subject: [PATCH 023/273] feat: add Understanding Ethereum section to homepage
---
src/pages/index.tsx | 82 +++++++++++++++++++++++++++++++++++++++++----
1 file changed, 75 insertions(+), 7 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 22c1a9c1275..825fc11f860 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,6 +2,7 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next"
import { useRouter } from "next/router"
import { useTranslation } from "next-i18next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
+import { MdChevronRight } from "react-icons/md"
import { Flex } from "@chakra-ui/react"
import { AllMetricData, BasePageProps, Lang } from "@/lib/types"
@@ -11,10 +12,13 @@ import BigNumber from "@/components/BigNumber"
import SvgButtonLink from "@/components/Buttons/SvgButtonLink"
import HomeHero from "@/components/Hero/HomeHero"
import HomeSection from "@/components/HomeSection"
+import BlockHeap from "@/components/icons/block-heap.svg"
import EthTokenIcon from "@/components/icons/eth-token.svg"
import PickWalletIcon from "@/components/icons/eth-wallet.svg"
import ChooseNetworkIcon from "@/components/icons/network-layers.svg"
import TryAppsIcon from "@/components/icons/phone-homescreen.svg"
+import RoadmapSign from "@/components/icons/roadmap-sign.svg"
+import Whitepaper from "@/components/icons/whitepaper.svg"
import MainArticle from "@/components/MainArticle"
import PageMetadata from "@/components/PageMetadata"
import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner"
@@ -30,6 +34,8 @@ import {
import { BASE_TIME_UNIT } from "@/lib/constants"
+import { ButtonLink } from "../../tailwind/ui/buttons/Button"
+
import CreateWalletContent from "!!raw-loader!@/data/CreateWallet.js"
import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
@@ -172,17 +178,39 @@ const HomePage = ({
},
]
+ const popularTopics = [
+ {
+ label: "What is Ethereum?",
+ Svg: EthTokenIcon,
+ href: "/what-is-ethereum/",
+ },
+ {
+ label: "What are crypto wallets?",
+ Svg: PickWalletIcon,
+ href: "/wallets/",
+ },
+ {
+ label: "How to start? (step by step)",
+ Svg: BlockHeap,
+ href: "/guides/",
+ },
+ {
+ label: "Ethereum Whitepaper",
+ Svg: Whitepaper,
+ href: "/whitepaper/",
+ },
+ {
+ label: "Ethereum roadmap",
+ Svg: RoadmapSign,
+ href: "/roadmap/",
+ },
+ ]
+
const comingSoon = [
{
title: "A new way to use the internet",
tag: "Use cases",
},
- {
- title: "Understanding Ethereum",
- tag: "Learn",
- imgSrc: learnImage,
- imageLast: true,
- },
{ title: "The internet is changing", tag: "" },
{
title: "Bockchain's biggest builder community",
@@ -193,7 +221,7 @@ const HomePage = ({
title: "Built by the community",
tag: "Ethereum.org community",
imgSrc: communityImage,
- imageLast: true,
+ className: "flex-col-reverse",
},
{ title: "Ethereum news", tag: "" },
{ title: "Ethereum events", tag: "" },
@@ -278,6 +306,46 @@ const HomePage = ({
+
+ + Cryptocurrency can feel overwhelming. Don't worry, these + materials are designed to help you understand Ethereum in just a + few minutes. +
+
+
+ Popular topics
+
+ {popularTopics.map(({ label, Svg, href }) => (
+
+
+ ))}
+
+ + {label} +
+
+
+ Other topics
+
+
{tag}
- {title}
++ {title} +
{children}+ Ethereum is home to Web3’s largest and most vibrant developer + ecosystem. Use JavaScript and Python, or learn a smart contract + language like Solidity or Vyper to write your own app. +
+
+
+ Builder's Portal
+
+ Documentation
+
+
+
+
+ {dummyCalendarData.map(({ date, title }, idx) => (
+
{/* Temporary coming soon section template */}
From 4f357340eb2f6e7c7a329ab39c34ac7b10944734 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 28 Jul 2024 20:18:14 -0700
Subject: [PATCH 033/273] iter: make imgSrc optional
---
src/components/HomeSection/index.tsx | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/src/components/HomeSection/index.tsx b/src/components/HomeSection/index.tsx
index 9760a57d164..d02713cf4a1 100644
--- a/src/components/HomeSection/index.tsx
+++ b/src/components/HomeSection/index.tsx
@@ -28,11 +28,13 @@ const HomeSection = ({
className
)}
>
-
+
-
+
+
+ {codeExamples[activeCode].code}
+
+
+
+ )}
Date: Sun, 28 Jul 2024 14:25:36 -0700
Subject: [PATCH 028/273] theme: update button outline to use primary
---
tailwind/ui/buttons/Button.tsx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/tailwind/ui/buttons/Button.tsx b/tailwind/ui/buttons/Button.tsx
index b47893105b6..79d9eec6da9 100644
--- a/tailwind/ui/buttons/Button.tsx
+++ b/tailwind/ui/buttons/Button.tsx
@@ -15,7 +15,8 @@ const buttonVariants = cva(
variant: {
solid:
"!text-background bg-primary border-transparent disabled:bg-disabled disabled:text-background hover:text-background hover:bg-primary-hover hover:shadow-button-hover active:shadow-none",
- outline: "hover:shadow-button-hover active:shadow-none",
+ outline:
+ "border-primary !text-primary fill-primary hover:shadow-button-hover active:shadow-none",
ghost: "border-transparent",
link: "border-transparent font-bold underline py-0 px-1 active:text-primary",
},
From c63cbe3fe60924c98896abb78ad56c7f13300907 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 28 Jul 2024 14:26:16 -0700
Subject: [PATCH 029/273] init: community section
---
src/lib/constants.ts | 2 ++
src/pages/index.tsx | 42 +++++++++++++++++++++++++++++++++++++++---
2 files changed, 41 insertions(+), 3 deletions(-)
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 6fb77b22af1..f16b1d069a1 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -25,6 +25,8 @@ export const LOCALES_CODES = BUILD_LOCALES
// Site urls
export const SITE_URL = "https://ethereum.org"
export const DISCORD_PATH = "/discord/"
+export const GITHUB_REPO_URL =
+ "https://github.com/ethereum/ethereum-org-website"
export const EDIT_CONTENT_URL = `https://github.com/ethereum/ethereum-org-website/tree/dev/`
export const MAIN_CONTENT_ID = "main-content"
export const WEBSITE_EMAIL = "website@ethereum.org"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3e15ff35de9..a00d63f7397 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,6 +3,7 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next"
import { useRouter } from "next/router"
import { useTranslation } from "next-i18next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
+import { FaDiscord, FaGithub } from "react-icons/fa"
import { MdChevronRight } from "react-icons/md"
import { Flex, Skeleton } from "@chakra-ui/react"
@@ -36,7 +37,7 @@ import {
isLangRightToLeft,
} from "@/lib/utils/translations"
-import { BASE_TIME_UNIT } from "@/lib/constants"
+import { BASE_TIME_UNIT, GITHUB_REPO_URL } from "@/lib/constants"
import { ButtonLink } from "../../tailwind/ui/buttons/Button"
@@ -422,9 +423,44 @@ const HomePage = ({
title="Built by the community"
imgSrc={communityImage}
isFlipped
- className=""
>
- 👷♀️🚧🔜
+
{/* Temporary coming soon section template */}
From b1548cf0123ece79d7c30b285efb016d1bff532d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 28 Jul 2024 15:12:51 -0700
Subject: [PATCH 030/273] create: reusable WindowBox component
---
src/components/WindowBox/index.tsx | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
create mode 100644 src/components/WindowBox/index.tsx
diff --git a/src/components/WindowBox/index.tsx b/src/components/WindowBox/index.tsx
new file mode 100644
index 00000000000..6bdca8ac714
--- /dev/null
+++ b/src/components/WindowBox/index.tsx
@@ -0,0 +1,21 @@
+import { FunctionComponent, ReactNode, SVGProps } from "react"
+
+type WindowBoxProps = {
+ title: ReactNode
+ Svg: FunctionComponent>
+ children?: ReactNode
+}
+
+const WindowBox = ({ title, children, Svg }: WindowBoxProps) => (
+
-
+
+
{tag}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5ba3153a6a2..9c665c3e09c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -298,7 +298,7 @@ const HomePage = ({
tag="Learn"
title="Understanding Ethereum"
imgSrc={learnImage}
- className="lg:flex-row-reverse"
+ isFlipped
>
@@ -370,7 +370,8 @@ const HomePage = ({ tag="Ethereum.org Community" title="Built by the community" imgSrc={communityImage} - className="flex-col-reverse" + isFlipped + className="" > 👷♀️🚧🔜 From 92a16229c0ce753350aaf356c94f41b2df111369 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sun, 28 Jul 2024 14:04:40 -0700 Subject: [PATCH 027/273] feat: add code examples section and functionality --- src/components/icons/angle-brackets.svg | 4 ++ src/intl/en/page-index.json | 8 ++-- src/pages/index.tsx | 55 ++++++++++++++++++++++++- src/styles/global.css | 2 + tailwind.config.ts | 1 + 5 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 src/components/icons/angle-brackets.svg diff --git a/src/components/icons/angle-brackets.svg b/src/components/icons/angle-brackets.svg new file mode 100644 index 00000000000..c9e6664af1a --- /dev/null +++ b/src/components/icons/angle-brackets.svg @@ -0,0 +1,4 @@ + diff --git a/src/intl/en/page-index.json b/src/intl/en/page-index.json index 9a4befae773..1e3e74e3c22 100644 --- a/src/intl/en/page-index.json +++ b/src/intl/en/page-index.json @@ -39,13 +39,13 @@ "page-index-developers-button": "Developer portal", "page-index-developers-code-examples": "Code examples", "page-index-developers-code-example-title-0": "Your own bank", - "page-index-developers-code-example-description-0": "You can build a bank powered by logic you've programmed.", + "page-index-developers-code-example-description-0": "Build a bank powered by logic you've programmed", "page-index-developers-code-example-title-1": "Your own currency", - "page-index-developers-code-example-description-1": "You can create tokens that you can transfer and use across applications.", + "page-index-developers-code-example-description-1": "Create tokens that you can transfer and use across applications", "page-index-developers-code-example-title-2": "A JavaScript Ethereum wallet", - "page-index-developers-code-example-description-2": "You can use existing languages to interact with Ethereum and other applications.", + "page-index-developers-code-example-description-2": "Use existing languages to interact with Ethereum and other applications", "page-index-developers-code-example-title-3": "An open, permissionless DNS", - "page-index-developers-code-example-description-3": "You can reimagine existing services as decentralized, open applications.", + "page-index-developers-code-example-description-3": "Reimagine existing services as decentralized, open applications", "page-index-network-stats-title": "Ethereum today", "page-index-network-stats-subtitle": "The latest network statistics", "page-index-network-stats-total-eth-staked": "Total ETH staked", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9c665c3e09c..3e15ff35de9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,17 +1,21 @@ +import { Suspense, useState } from "react" import type { GetStaticProps, InferGetStaticPropsType } from "next" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { serverSideTranslations } from "next-i18next/serverSideTranslations" import { MdChevronRight } from "react-icons/md" -import { Flex } from "@chakra-ui/react" +import { Flex, Skeleton } from "@chakra-ui/react" import { AllMetricData, BasePageProps, Lang } from "@/lib/types" import type { CodeExample, CommunityEventsReturnType } from "@/lib/interfaces" import BigNumber from "@/components/BigNumber" import SvgButtonLink from "@/components/Buttons/SvgButtonLink" +import Codeblock from "@/components/Codeblock" +import CodeModal from "@/components/CodeModal" import HomeHero from "@/components/Hero/HomeHero" import HomeSection from "@/components/HomeSection" +import AngleBrackets from "@/components/icons/angle-brackets.svg" import BlockHeap from "@/components/icons/block-heap.svg" import EthTokenIcon from "@/components/icons/eth-token.svg" import PickWalletIcon from "@/components/icons/eth-wallet.svg" @@ -105,6 +109,14 @@ const HomePage = ({ const { locale, asPath } = useRouter() const dir = isLangRightToLeft(locale as Lang) ? "rtl" : "ltr" + const [isModalOpen, setModalOpen] = useState(false) + const [activeCode, setActiveCode] = useState(0) + + const toggleCodeExample = (id: number): void => { + setActiveCode(id) + setModalOpen(true) + } + const codeExamples: CodeExample[] = [ { title: t("page-index:page-index-developers-code-example-title-0"), @@ -363,7 +375,46 @@ const HomePage = ({ Documentation
+
+ {isModalOpen && (
+ // TODO: Migrate CodeModal, CodeBlock, Skeleton from Chakra-UI to tailwind/shad-cn
+
+
+ {codeExamples.map(({ title, description }, idx) => (
+
+ ))}
+
+
+ + {t("page-index:page-index-developers-code-examples")} +
+
+
+ + The ethereum.org website is built and maintained by hundreds of + translators, coders, designers, copywriters, and enthusiastic + community members each month. +
++ Come ask questions, connect with people around the world and + contribute to the website. You will get relevant practical + experience and be guided during the process! +
++ Ethereum.org community is the perfect place to start and learn. +
+
+
+
+
+
+
+ More on ethereum.org
+
+
+)
+
+export default WindowBox
From f139f5213da977ee32eaa9bbfb478400291a8c25 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 28 Jul 2024 15:13:13 -0700
Subject: [PATCH 031/273] theme: add gradient, import svg, linting
---
src/components/icons/calendar.svg | 3 +++
src/styles/global.css | 1 +
tailwind.config.ts | 1 +
3 files changed, 5 insertions(+)
create mode 100644 src/components/icons/calendar.svg
diff --git a/src/components/icons/calendar.svg b/src/components/icons/calendar.svg
new file mode 100644
index 00000000000..c319e2ed94f
--- /dev/null
+++ b/src/components/icons/calendar.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 71f7c00c4b6..301acb869f5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -135,6 +135,7 @@
--table-item-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
--primary-highlight-gradient: linear-gradient(180deg, rgba(167, 121, 226, 0.05) 0%, rgba(167, 121, 226, 0.00) 100%);
+ --accept-gradient: linear-gradient(0deg, rgba(185, 185, 241, 0.24) 0%, rgba(84, 132, 234, 0.08) 100%);
}
[data-theme="dark"] {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cff7e020e97..9e184204d6a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -90,6 +90,7 @@ const config = {
backgroundImage: {
"bg-main-gradient": "var(--bg-main-gradient)",
"primary-highlight-gradient": "var(--primary-highlight-gradient)",
+ "accent-gradient": "var(--accept-gradient)",
},
boxShadow: {
"table-box": "var(--table-box-shadow)",
From 46eb9fb82f9eff80a5562b0bbc93a8d3f90cfbda Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 28 Jul 2024 15:13:43 -0700
Subject: [PATCH 032/273] init: add Next calls section, dummy data
---
src/pages/index.tsx | 76 ++++++++++++++++++++++++++++++++++++++-------
1 file changed, 65 insertions(+), 11 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a00d63f7397..c60c9474624 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "next-i18next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
import { FaDiscord, FaGithub } from "react-icons/fa"
import { MdChevronRight } from "react-icons/md"
+import { RxExternalLink } from "react-icons/rx"
import { Flex, Skeleton } from "@chakra-ui/react"
import { AllMetricData, BasePageProps, Lang } from "@/lib/types"
@@ -18,6 +19,7 @@ import HomeHero from "@/components/Hero/HomeHero"
import HomeSection from "@/components/HomeSection"
import AngleBrackets from "@/components/icons/angle-brackets.svg"
import BlockHeap from "@/components/icons/block-heap.svg"
+import Calendar from "@/components/icons/calendar.svg"
import EthTokenIcon from "@/components/icons/eth-token.svg"
import PickWalletIcon from "@/components/icons/eth-wallet.svg"
import ChooseNetworkIcon from "@/components/icons/network-layers.svg"
@@ -27,7 +29,9 @@ import Whitepaper from "@/components/icons/whitepaper.svg"
import MainArticle from "@/components/MainArticle"
import PageMetadata from "@/components/PageMetadata"
import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner"
+import WindowBox from "@/components/WindowBox"
+import { cn } from "@/lib/utils/cn"
import { existsNamespace } from "@/lib/utils/existsNamespace"
import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
import { runOnlyOnce } from "@/lib/utils/runOnlyOnce"
@@ -39,7 +43,7 @@ import {
import { BASE_TIME_UNIT, GITHUB_REPO_URL } from "@/lib/constants"
-import { ButtonLink } from "../../tailwind/ui/buttons/Button"
+import { Button, ButtonLink } from "../../tailwind/ui/buttons/Button"
import CreateWalletContent from "!!raw-loader!@/data/CreateWallet.js"
import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
@@ -219,6 +223,25 @@ const HomePage = ({
},
]
+ const dummyCalendarData = [
+ {
+ date: "May 29, 2024 at 18:00",
+ title: "ethereum.org Community Call - May 2024",
+ },
+ {
+ date: "Jul 25, 2024",
+ title: "☎️ ethereum.org Community Call - July 2024",
+ },
+ {
+ date: "Jul 3, 2024",
+ title: "🛠 QA session - ethereum.org portal",
+ },
+ {
+ date: "May 8, 2024",
+ title:
+ "👾 Live coding session - Implementing a visual testing component on ethereum.org",
+ },
+ ]
const comingSoon = [
{ title: "Ethereum news", tag: "" },
{ title: "Ethereum events", tag: "" },
@@ -376,15 +399,10 @@ const HomePage = ({
Documentation
+
+ {children}
+
+
+
+ {title}
+
-
{codeExamples.map(({ title, description }, idx) => (
))}
-
+
+
{isModalOpen && (
// TODO: Migrate CodeModal, CodeBlock, Skeleton from Chakra-UI to tailwind/shad-cn
-
+
-
- - {t("page-index:page-index-developers-code-examples")} -
-
+
+ ))}
+
+
+
+ {date}
++ {title} +
+
{tag}
From c11e3e805b1bd27583816e4c36acd5fb6ab261e5 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 28 Jul 2024 20:18:52 -0700
Subject: [PATCH 034/273] create: npx shadcn-ui@latest add card
---
src/components/ui/card.tsx | 79 ++++++++++++++++++++++++++++++++++++++
1 file changed, 79 insertions(+)
create mode 100644 src/components/ui/card.tsx
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 00000000000..6faf98b08f6
--- /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 }
From 2ea7d873664a9366a8349e55d6307a59c57d7fad Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 28 Jul 2024 20:19:10 -0700
Subject: [PATCH 035/273] chore: add icon animation
---
src/components/Buttons/SvgButtonLink.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/Buttons/SvgButtonLink.tsx b/src/components/Buttons/SvgButtonLink.tsx
index f2e1a9bd7b6..92ddc2a3735 100644
--- a/src/components/Buttons/SvgButtonLink.tsx
+++ b/src/components/Buttons/SvgButtonLink.tsx
@@ -21,7 +21,7 @@ const SvgButtonLink = ({
-
+
{label &&
{label}
} From f7e629e10249676528a15857e88c0b383bdf46a2 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sun, 28 Jul 2024 22:10:20 -0700 Subject: [PATCH 036/273] init: upcoming events --- src/pages/index.tsx | 81 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c60c9474624..bf79e2a6b63 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -29,6 +29,7 @@ import Whitepaper from "@/components/icons/whitepaper.svg" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner" +import { Card, CardContent, CardHeader } from "@/components/ui/card" import WindowBox from "@/components/WindowBox" import { cn } from "@/lib/utils/cn" @@ -41,6 +42,8 @@ import { isLangRightToLeft, } from "@/lib/utils/translations" +import events from "@/data/community-events.json" + import { BASE_TIME_UNIT, GITHUB_REPO_URL } from "@/lib/constants" import { Button, ButtonLink } from "../../tailwind/ui/buttons/Button" @@ -242,11 +245,18 @@ const HomePage = ({ "👾 Live coding session - Implementing a visual testing component on ethereum.org", }, ] + const comingSoon = [ { title: "Ethereum news", tag: "" }, - { title: "Ethereum events", tag: "" }, { title: "Join ethereum.org", tag: "" }, ] + + const upcomingEvents = events + .sort( + (a, b) => new Date(a.endDate).getTime() - new Date(b.endDate).getTime() + ) + .slice(0, 3) + return (
-
+
{SubHeroCTAs.map(({ label, description, href, colorClass, Svg }) => (
))}
+
+ {/* TODO: News sub-section */}
+
+
{/* Temporary coming soon section template */}
{comingSoon.map((item) => (
We have many community events scheduled around the globe
+
+
+
+ {upcomingEvents.map(
+ ({
+ title,
+ href,
+ location,
+ description,
+ startDate,
+ endDate,
+ imageUrl,
+ }) => {
+ return (
+
+
+
+ {imageUrl && (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ )}
+ {/* TODO: Handle event image */}
+
+
+
+
+
+ )
+ }
+ )}
+
+
+
+ {title}
++ {new Intl.DateTimeFormat(locale, { + month: "2-digit", + day: "2-digit", + year: "numeric", + }).formatRange( + new Date(startDate), + new Date(endDate) + )} +
++ {location} +
+{description}
+{value}
+ {value}
{children}
{sourceName && sourceUrl && (
From 5cc62898195c689729311d52ed5296061da833b7 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 31 Jul 2024 19:29:16 -0700
Subject: [PATCH 038/273] feat: add error state to BigNumbers
---
src/components/BigNumber/index.tsx | 38 ++++++++++++++++++------------
1 file changed, 23 insertions(+), 15 deletions(-)
diff --git a/src/components/BigNumber/index.tsx b/src/components/BigNumber/index.tsx
index 63b243ecd44..95744b61e5c 100644
--- a/src/components/BigNumber/index.tsx
+++ b/src/components/BigNumber/index.tsx
@@ -1,4 +1,5 @@
import { type ReactNode } from "react"
+import { useTranslation } from "next-i18next"
import { MdInfoOutline } from "react-icons/md"
import {
@@ -13,7 +14,7 @@ import { BaseLink } from "../Link"
type BigNumberProps = {
children: ReactNode
- value: ReactNode
+ value?: ReactNode
sourceName?: string
sourceUrl?: string
className?: string
@@ -26,6 +27,7 @@ const BigNumber = ({
sourceUrl,
className,
}: BigNumberProps) => {
+ const { t } = useTranslation("common")
return (
=> {
}
const json: EtherscanNodeResponse = await response.json()
- const data: TimestampedData[] = json.result
- .map(({ UTCDate, TotalNodeCount }) => ({
- timestamp: new Date(UTCDate).getTime(),
- value: +TotalNodeCount,
- }))
- .sort((a, b) => a.timestamp - b.timestamp)
- const { value } = data[data.length - 1]
+ // Today's value at start (only value) of array
+ const value = json.result[0].TotalNodeCount
- return {
- data, // historical data: { timestamp: unix-milliseconds, value }
- value, // current value (number, unformatted)
- }
+ // current value (number, unformatted)
+ return { value }
} catch (error: unknown) {
console.error((error as Error).message)
return { error: (error as Error).message }
diff --git a/src/lib/api/fetchTotalEthStaked.ts b/src/lib/api/fetchTotalEthStaked.ts
index c0215fd04c8..76714105f54 100644
--- a/src/lib/api/fetchTotalEthStaked.ts
+++ b/src/lib/api/fetchTotalEthStaked.ts
@@ -16,33 +16,23 @@ export const fetchTotalEthStaked = async (): Promise => {
)
try {
- const ethStakedResponse = await fetch(url, {
+ const response = await fetch(url, {
headers: { "X-Dune-API-Key": DUNE_API_KEY },
})
- if (!ethStakedResponse.ok) {
- console.log(ethStakedResponse.status, ethStakedResponse.statusText)
+ if (!response.ok) {
+ console.log(response.status, response.statusText)
throw new Error("Failed to fetch eth staked data")
}
- const ethStakedJson: EthStakedResponse = await ethStakedResponse.json()
+ const json: EthStakedResponse = await response.json()
const {
result: { rows = [] },
- } = ethStakedJson
+ } = json
+ // Today's value at start of array
+ const value = rows[0].cum_deposited_eth
- const data = rows.map((row) => ({
- timestamp: new Date(row.time).getTime(),
- value: row.cum_deposited_eth,
- }))
-
- // data is already sorted...but just in case
- data.sort((a, b) => a.timestamp - b.timestamp)
-
- const { value } = data[data.length - 1]
-
- return {
- data,
- value,
- }
+ // current value (number, unformatted)
+ return { value }
} catch (error: unknown) {
console.error((error as Error).message)
return { error: (error as Error).message }
diff --git a/src/lib/api/fetchTotalValueLocked.ts b/src/lib/api/fetchTotalValueLocked.ts
index 5299b86792b..877a0f70022 100644
--- a/src/lib/api/fetchTotalValueLocked.ts
+++ b/src/lib/api/fetchTotalValueLocked.ts
@@ -1,14 +1,6 @@
-import takeRightWhile from "lodash/takeRightWhile"
-
import { DefiLlamaTVLResponse, MetricReturnData } from "@/lib/types"
-import { DAYS_TO_FETCH } from "@/lib/constants"
-
export const fetchTotalValueLocked = async (): Promise => {
- const now = new Date()
- const startDate = new Date(now.setDate(now.getDate() - DAYS_TO_FETCH))
- const startTimestamp = Math.round(startDate.getTime() / 1000)
-
try {
const response = await fetch(`https://api.llama.fi/charts/Ethereum`)
if (!response.ok) {
@@ -17,18 +9,11 @@ export const fetchTotalValueLocked = async (): Promise => {
}
const json: DefiLlamaTVLResponse = await response.json()
- const data = takeRightWhile(json, ({ date }) => +date > startTimestamp)
- .map(({ date, totalLiquidityUSD }) => ({
- timestamp: +date * 1000,
- value: totalLiquidityUSD,
- }))
- .sort((a, b) => a.timestamp - b.timestamp)
- const { value } = data[data.length - 1]
+ // Today's value at end of array
+ const value = json[json.length - 1].totalLiquidityUSD
- return {
- data, // historical data: { timestamp: unix-milliseconds, value }
- value, // current value (number, unformatted)
- }
+ // current value (number, unformatted)
+ return { value }
} catch (error: unknown) {
console.error((error as Error).message)
return { error: (error as Error).message }
diff --git a/src/lib/api/fetchTxCount.ts b/src/lib/api/fetchTxCount.ts
index a68c2f633df..144f545a3f0 100644
--- a/src/lib/api/fetchTxCount.ts
+++ b/src/lib/api/fetchTxCount.ts
@@ -1,8 +1,4 @@
-import type {
- EtherscanTxCountResponse,
- MetricReturnData,
- TimestampedData,
-} from "@/lib/types"
+import type { EtherscanTxCountResponse, MetricReturnData } from "@/lib/types"
import { DAYS_TO_FETCH, ETHERSCAN_API_URL } from "@/lib/constants"
@@ -19,7 +15,7 @@ export const fetchTxCount = async (): Promise => {
action: "dailytx",
startdate: startDate,
enddate: endDate,
- sort: "asc",
+ sort: "desc",
apikey: apiKey,
}).toString()
@@ -33,18 +29,11 @@ export const fetchTxCount = async (): Promise => {
}
const json: EtherscanTxCountResponse = await response.json()
- const data: TimestampedData[] = json.result
- .map(({ unixTimeStamp, transactionCount }) => ({
- timestamp: +unixTimeStamp * 1000, // unix milliseconds
- value: transactionCount,
- }))
- .sort((a, b) => a.timestamp - b.timestamp)
- const { value } = data[data.length - 1]
+ // Today's value at start (only value) of array
+ const value = json.result[0].transactionCount
- return {
- data, // historical data: { timestamp: unix-milliseconds, value }
- value, // current value (number, unformatted)
- }
+ // current value (number, unformatted)
+ return { value }
} catch (error: unknown) {
console.error((error as Error).message)
return {
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index f16b1d069a1..387c7a1e6f4 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -73,8 +73,7 @@ export const REGULAR_RATES: ReportsModel.RegularRate[] = [
export const languagePathRootRegExp = /^.+\/content\/translations\/[a-z-]*\//
// Metrics
-export const DAYS_TO_FETCH = 90
-export const RANGES = ["30d", "90d"] as const
+export const DAYS_TO_FETCH = 1
export const BEACONCHA_IN_URL = "https://beaconcha.in/"
export const ETHERSCAN_API_URL = "https://api.etherscan.io"
export const DUNE_API_URL = "https://api.dune.com"
diff --git a/src/lib/types.ts b/src/lib/types.ts
index b7faea71248..2e882116c85 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -508,19 +508,7 @@ export type StakingStatsData = {
apr: number
}
-export type TimestampedData = {
- timestamp: number
- value: T
-}
-
-export type MetricDataValue =
- | {
- error: string
- }
- | {
- data: Data
- value: Value
- }
+export type ValueOrError = { value: T } | { error: string }
export type EtherscanNodeResponse = {
result: {
@@ -545,27 +533,21 @@ export type DefiLlamaTVLResponse = {
totalLiquidityUSD: number
}[]
-export type MetricReturnData = MetricDataValue<
- TimestampedData[],
- number
->
+export type MetricReturnData = ValueOrError
-export type StatsBoxState = MetricDataValue[], string>
+export type StatsBoxState = ValueOrError
-export type MetricSection =
+export type MetricName =
| "totalEthStaked"
| "nodeCount"
| "totalValueLocked"
| "txCount"
-
-export type AllMetricData = Record
+export type AllMetricData = Record
export type StatsBoxMetric = {
- title: string
- description: string
+ label: string
+ description?: string
state: StatsBoxState
- buttonContainer: JSX.Element
- range: string
apiUrl: string
apiProvider: string
}
From 0a3ce4a329cb75dc7c3ba049579e0b98face8277 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 31 Jul 2024 20:18:31 -0700
Subject: [PATCH 040/273] revamp: StatsBoxGrid components
---
src/components/StatsBoxGrid/GridItem.tsx | 223 ---
src/components/StatsBoxGrid/RangeSelector.tsx | 48 -
.../StatsBoxGrid/StatsBoxGrid.stories.tsx | 1195 -----------------
src/components/StatsBoxGrid/index.tsx | 42 +-
.../StatsBoxGrid/useStatsBoxGrid.tsx | 94 +-
5 files changed, 35 insertions(+), 1567 deletions(-)
delete mode 100644 src/components/StatsBoxGrid/GridItem.tsx
delete mode 100644 src/components/StatsBoxGrid/RangeSelector.tsx
delete mode 100644 src/components/StatsBoxGrid/StatsBoxGrid.stories.tsx
diff --git a/src/components/StatsBoxGrid/GridItem.tsx b/src/components/StatsBoxGrid/GridItem.tsx
deleted file mode 100644
index c970b2358e3..00000000000
--- a/src/components/StatsBoxGrid/GridItem.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import {
- CategoryScale,
- Chart as ChartJS,
- Filler,
- LinearScale,
- LineElement,
- PointElement,
- ScriptableContext,
-} from "chart.js"
-import ChartDataLabels from "chartjs-plugin-datalabels"
-import { Line } from "react-chartjs-2"
-import { MdInfoOutline } from "react-icons/md"
-import { Box, Flex, Icon, Text } from "@chakra-ui/react"
-
-import type { StatsBoxMetric, TimestampedData } from "@/lib/types"
-
-import { RANGES } from "@/lib/constants"
-
-import InlineLink from "../Link"
-import OldText from "../OldText"
-import StatErrorMessage from "../StatErrorMessage"
-import Tooltip from "../Tooltip"
-import Translation from "../Translation"
-
-const tooltipContent = (metric: StatsBoxMetric) => (
-
-
- {state.value}{" "}
-
-
-
-
-
-
-
-
- )
-
- // Returns either 90 or 30-day data range depending on `range` selection
- const filteredData = (data: TimestampedData[]) => {
- if (range === RANGES[1]) return [...data]
-
- return data.filter(({ timestamp }) => {
- const millisecondRange = 1000 * 60 * 60 * 24 * 30
- const now = new Date().getTime()
-
- return timestamp >= now - millisecondRange
- })
- }
-
- const minValue = hasData
- ? state.data.reduce(
- (prev, { value }) => (prev < value ? prev : value),
- Infinity
- )
- : 0
-
- const maxValue = hasData
- ? state.data.reduce((prev, { value }) => (prev > value ? prev : value), 0)
- : 0
-
- // ChartJS options
- const chartOptions = {
- // chart styles
- borderColor: "#8884db",
- borderWidth: 1,
- tension: 0.3,
- fill: true,
- backgroundColor: (context: ScriptableContext<"line">) => {
- const ctx = context.chart.ctx
- const gradient = ctx.createLinearGradient(0, 0, 0, 220)
- // gradient.addColorStop(offset, color)
- gradient.addColorStop(0, "#8884d84d")
- gradient.addColorStop(0.85, "#ffffff00")
-
- return gradient
- },
- pointRadius: 0,
- maintainAspectRatio: false,
- // chart legend/title config
- plugins: {
- legend: {
- display: false, // hide chart legend
- },
- title: {
- display: false, // hide titles
- },
- // force disabling chart labels because when the user do an internal
- // navigation, labels are displayed incorrectly (probably a bug in
- // chart.js or the react wrapper)
- datalabels: {
- display: false,
- },
- },
- // chart labels config
- scales: {
- y: {
- display: false, // hide Y axis labels
- grid: {
- display: false,
- },
- min: minValue,
- max: maxValue,
- },
- x: {
- display: false, // hide X axis labels
- grid: {
- display: false,
- },
- },
- },
- }
-
- const filteredRange = filteredData(hasData ? state.data : [])
-
- const chartData = {
- labels: filteredRange,
- datasets: [
- {
- data: filteredRange.map((item) => item.value),
- },
- ],
- }
-
- return (
-
-
-
- {title}
-
- {description}
-
- {hasData && (
-
-
- )}
-
-
- {value}
-
- {hasData && (
-
- {buttonContainer}
-
- )}
-
-
- )
-}
diff --git a/src/components/StatsBoxGrid/RangeSelector.tsx b/src/components/StatsBoxGrid/RangeSelector.tsx
deleted file mode 100644
index f20c2bd0a9b..00000000000
--- a/src/components/StatsBoxGrid/RangeSelector.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Button } from "@chakra-ui/react"
-
-import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
-
-import { RANGES } from "@/lib/constants"
-
-type RangeSelectorProps = {
- state: string
- setState: (state: string) => void
- matomo: MatomoEventOptions
-}
-
-export const RangeSelector = ({
- state,
- setState,
- matomo,
-}: RangeSelectorProps) => (
-
-
-export default meta
-
-const data = {
- totalEthStaked: {
- data: [
- {
- timestamp: 1711046914939,
- value: 31264816,
- },
- {
- timestamp: 1711478914750,
- value: 31293710,
- },
- {
- timestamp: 1711910914539,
- value: 31252698,
- },
- {
- timestamp: 1712342914293,
- value: 31276284,
- },
- {
- timestamp: 1712774913817,
- value: 31335770,
- },
- {
- timestamp: 1713206913617,
- value: 31433722,
- },
- {
- timestamp: 1713638913307,
- value: 31567738,
- },
- {
- timestamp: 1714070913106,
- value: 31792826,
- },
- {
- timestamp: 1714502912732,
- value: 31962077,
- },
- {
- timestamp: 1714934912550,
- value: 32161756,
- },
- {
- timestamp: 1715366912357,
- value: 32318268,
- },
- {
- timestamp: 1715798912177,
- value: 32346523,
- },
- {
- timestamp: 1716230911985,
- value: 32140059,
- },
- {
- timestamp: 1716662911731,
- value: 32144667,
- },
- {
- timestamp: 1717094911536,
- value: 32159580,
- },
- {
- timestamp: 1717526911328,
- value: 32402137,
- },
- {
- timestamp: 1717958911024,
- value: 32529753,
- },
- {
- timestamp: 1718390910942,
- value: 32654772,
- },
- {
- timestamp: 1718822910942,
- value: 32737397,
- },
- ],
- value: 32737397,
- },
- nodeCount: {
- data: [
- {
- timestamp: 1710979200000,
- value: 8846,
- },
- {
- timestamp: 1711065600000,
- value: 8188,
- },
- {
- timestamp: 1711152000000,
- value: 7010,
- },
- {
- timestamp: 1711238400000,
- value: 6877,
- },
- {
- timestamp: 1711324800000,
- value: 7268,
- },
- {
- timestamp: 1711411200000,
- value: 8107,
- },
- {
- timestamp: 1711497600000,
- value: 6914,
- },
- {
- timestamp: 1711584000000,
- value: 7616,
- },
- {
- timestamp: 1711670400000,
- value: 8245,
- },
- {
- timestamp: 1711756800000,
- value: 7984,
- },
- {
- timestamp: 1711843200000,
- value: 7139,
- },
- {
- timestamp: 1711929600000,
- value: 8311,
- },
- {
- timestamp: 1712016000000,
- value: 8158,
- },
- {
- timestamp: 1712102400000,
- value: 9454,
- },
- {
- timestamp: 1712188800000,
- value: 8151,
- },
- {
- timestamp: 1712275200000,
- value: 8194,
- },
- {
- timestamp: 1712361600000,
- value: 8002,
- },
- {
- timestamp: 1712448000000,
- value: 8290,
- },
- {
- timestamp: 1712534400000,
- value: 7496,
- },
- {
- timestamp: 1712620800000,
- value: 7854,
- },
- {
- timestamp: 1712707200000,
- value: 7593,
- },
- {
- timestamp: 1712793600000,
- value: 6285,
- },
- {
- timestamp: 1712880000000,
- value: 6850,
- },
- {
- timestamp: 1712966400000,
- value: 6287,
- },
- {
- timestamp: 1713052800000,
- value: 7289,
- },
- {
- timestamp: 1713139200000,
- value: 6868,
- },
- {
- timestamp: 1713225600000,
- value: 6195,
- },
- {
- timestamp: 1713312000000,
- value: 6476,
- },
- {
- timestamp: 1713398400000,
- value: 6859,
- },
- {
- timestamp: 1713484800000,
- value: 7235,
- },
- {
- timestamp: 1713571200000,
- value: 6027,
- },
- {
- timestamp: 1713657600000,
- value: 7191,
- },
- {
- timestamp: 1713744000000,
- value: 7596,
- },
- {
- timestamp: 1713830400000,
- value: 7052,
- },
- {
- timestamp: 1713916800000,
- value: 7170,
- },
- {
- timestamp: 1714003200000,
- value: 8531,
- },
- {
- timestamp: 1714089600000,
- value: 7841,
- },
- {
- timestamp: 1714176000000,
- value: 7195,
- },
- {
- timestamp: 1714262400000,
- value: 7741,
- },
- {
- timestamp: 1714348800000,
- value: 7895,
- },
- {
- timestamp: 1714435200000,
- value: 8027,
- },
- {
- timestamp: 1714521600000,
- value: 7028,
- },
- {
- timestamp: 1714608000000,
- value: 6629,
- },
- {
- timestamp: 1714694400000,
- value: 6143,
- },
- {
- timestamp: 1714780800000,
- value: 6528,
- },
- {
- timestamp: 1714867200000,
- value: 6359,
- },
- {
- timestamp: 1714953600000,
- value: 7558,
- },
- {
- timestamp: 1715040000000,
- value: 7096,
- },
- {
- timestamp: 1715126400000,
- value: 6759,
- },
- {
- timestamp: 1715212800000,
- value: 6935,
- },
- {
- timestamp: 1715299200000,
- value: 5857,
- },
- {
- timestamp: 1715385600000,
- value: 5258,
- },
- {
- timestamp: 1715472000000,
- value: 6815,
- },
- {
- timestamp: 1715558400000,
- value: 6587,
- },
- {
- timestamp: 1715644800000,
- value: 6013,
- },
- {
- timestamp: 1715731200000,
- value: 5951,
- },
- {
- timestamp: 1715817600000,
- value: 6260,
- },
- {
- timestamp: 1715904000000,
- value: 6786,
- },
- {
- timestamp: 1715990400000,
- value: 6319,
- },
- {
- timestamp: 1716076800000,
- value: 6494,
- },
- {
- timestamp: 1716163200000,
- value: 6885,
- },
- {
- timestamp: 1716249600000,
- value: 6747,
- },
- {
- timestamp: 1716336000000,
- value: 0,
- },
- {
- timestamp: 1716422400000,
- value: 5859,
- },
- {
- timestamp: 1716508800000,
- value: 6153,
- },
- {
- timestamp: 1716595200000,
- value: 5336,
- },
- {
- timestamp: 1716681600000,
- value: 5277,
- },
- {
- timestamp: 1716768000000,
- value: 5319,
- },
- {
- timestamp: 1716854400000,
- value: 4743,
- },
- {
- timestamp: 1716940800000,
- value: 5852,
- },
- {
- timestamp: 1717027200000,
- value: 6014,
- },
- {
- timestamp: 1717113600000,
- value: 5984,
- },
- {
- timestamp: 1717200000000,
- value: 5909,
- },
- {
- timestamp: 1717286400000,
- value: 5056,
- },
- {
- timestamp: 1717372800000,
- value: 4446,
- },
- {
- timestamp: 1717459200000,
- value: 4245,
- },
- {
- timestamp: 1717545600000,
- value: 5257,
- },
- {
- timestamp: 1717632000000,
- value: 4735,
- },
- {
- timestamp: 1717718400000,
- value: 4454,
- },
- {
- timestamp: 1717804800000,
- value: 4845,
- },
- {
- timestamp: 1717891200000,
- value: 5292,
- },
- {
- timestamp: 1717977600000,
- value: 5224,
- },
- {
- timestamp: 1718064000000,
- value: 5034,
- },
- {
- timestamp: 1718150400000,
- value: 5108,
- },
- {
- timestamp: 1718236800000,
- value: 5886,
- },
- {
- timestamp: 1718323200000,
- value: 5310,
- },
- {
- timestamp: 1718409600000,
- value: 4182,
- },
- {
- timestamp: 1718496000000,
- value: 4873,
- },
- {
- timestamp: 1718582400000,
- value: 6107,
- },
- {
- timestamp: 1718668800000,
- value: 5653,
- },
- ],
- value: 5653,
- },
- totalValueLocked: {
- data: [
- {
- timestamp: 1711065600000,
- value: 112244661480.2202,
- },
- {
- timestamp: 1711152000000,
- value: 110190192300.0835,
- },
- {
- timestamp: 1711238400000,
- value: 111073589588.7738,
- },
- {
- timestamp: 1711324800000,
- value: 113634706183.9239,
- },
- {
- timestamp: 1711411200000,
- value: 119601181065.50461,
- },
- {
- timestamp: 1711497600000,
- value: 118195537110.08882,
- },
- {
- timestamp: 1711584000000,
- value: 118607194697.73175,
- },
- {
- timestamp: 1711670400000,
- value: 118246750821.37906,
- },
- {
- timestamp: 1711756800000,
- value: 118283614370.13524,
- },
- {
- timestamp: 1711843200000,
- value: 120448819041.86978,
- },
- {
- timestamp: 1711929600000,
- value: 119620445071.31076,
- },
- {
- timestamp: 1712016000000,
- value: 112692670247.1247,
- },
- {
- timestamp: 1712102400000,
- value: 112485442989.18071,
- },
- {
- timestamp: 1712188800000,
- value: 113602568195.16336,
- },
- {
- timestamp: 1712275200000,
- value: 111959253114.345,
- },
- {
- timestamp: 1712361600000,
- value: 114132015553.75801,
- },
- {
- timestamp: 1712448000000,
- value: 115851240566.14578,
- },
- {
- timestamp: 1712534400000,
- value: 123130301692.1496,
- },
- {
- timestamp: 1712620800000,
- value: 124547851876.65347,
- },
- {
- timestamp: 1712707200000,
- value: 120899586471.45726,
- },
- {
- timestamp: 1712793600000,
- value: 122385636017.12401,
- },
- {
- timestamp: 1712880000000,
- value: 123151578066.06805,
- },
- {
- timestamp: 1712966400000,
- value: 113784803211.6668,
- },
- {
- timestamp: 1713052800000,
- value: 106536975620.96655,
- },
- {
- timestamp: 1713139200000,
- value: 113189403518.79079,
- },
- {
- timestamp: 1713225600000,
- value: 107708745426.17822,
- },
- {
- timestamp: 1713312000000,
- value: 108684368474.94485,
- },
- {
- timestamp: 1713398400000,
- value: 107162474320.61333,
- },
- {
- timestamp: 1713484800000,
- value: 110090672664.77606,
- },
- {
- timestamp: 1713571200000,
- value: 108572626750.28156,
- },
- {
- timestamp: 1713657600000,
- value: 112998105936.53021,
- },
- {
- timestamp: 1713744000000,
- value: 114451840616.87883,
- },
- {
- timestamp: 1713830400000,
- value: 113726006496.89804,
- },
- {
- timestamp: 1713916800000,
- value: 116757806473.36693,
- },
- {
- timestamp: 1714003200000,
- value: 111069125672.59727,
- },
- {
- timestamp: 1714089600000,
- value: 112788830205.30832,
- },
- {
- timestamp: 1714176000000,
- value: 112413080674.99602,
- },
- {
- timestamp: 1714262400000,
- value: 118333313305.13948,
- },
- {
- timestamp: 1714348800000,
- value: 114616820172.5089,
- },
- {
- timestamp: 1714435200000,
- value: 110828487877.77112,
- },
- {
- timestamp: 1714521600000,
- value: 105363073148.13794,
- },
- {
- timestamp: 1714608000000,
- value: 108187152890.4916,
- },
- {
- timestamp: 1714694400000,
- value: 109094689870.53958,
- },
- {
- timestamp: 1714780800000,
- value: 115263926362.20056,
- },
- {
- timestamp: 1714867200000,
- value: 115393194183.03171,
- },
- {
- timestamp: 1714953600000,
- value: 116588409789.4379,
- },
- {
- timestamp: 1715040000000,
- value: 114437792284.27107,
- },
- {
- timestamp: 1715126400000,
- value: 111428115073.99696,
- },
- {
- timestamp: 1715212800000,
- value: 110350740294.4409,
- },
- {
- timestamp: 1715299200000,
- value: 112861640750.64597,
- },
- {
- timestamp: 1715385600000,
- value: 108441023395.26541,
- },
- {
- timestamp: 1715472000000,
- value: 109441892417.54547,
- },
- {
- timestamp: 1715558400000,
- value: 110641475045.34535,
- },
- {
- timestamp: 1715644800000,
- value: 108922287180.79155,
- },
- {
- timestamp: 1715731200000,
- value: 109040151657.00539,
- },
- {
- timestamp: 1715817600000,
- value: 112482393192.17567,
- },
- {
- timestamp: 1715904000000,
- value: 113380081979.20108,
- },
- {
- timestamp: 1715990400000,
- value: 116999947777.71738,
- },
- {
- timestamp: 1716076800000,
- value: 116028326673.59668,
- },
- {
- timestamp: 1716163200000,
- value: 115872329763.73926,
- },
- {
- timestamp: 1716249600000,
- value: 136497979086.03397,
- },
- {
- timestamp: 1716336000000,
- value: 137054108833.94127,
- },
- {
- timestamp: 1716422400000,
- value: 140518562022.72626,
- },
- {
- timestamp: 1716508800000,
- value: 135408923028.20445,
- },
- {
- timestamp: 1716595200000,
- value: 138208686011.70172,
- },
- {
- timestamp: 1716681600000,
- value: 139486607005.51178,
- },
- {
- timestamp: 1716768000000,
- value: 142846997319.63187,
- },
- {
- timestamp: 1716854400000,
- value: 142531945072.63226,
- },
- {
- timestamp: 1716940800000,
- value: 141121193824.71576,
- },
- {
- timestamp: 1717027200000,
- value: 138725735009.70367,
- },
- {
- timestamp: 1717113600000,
- value: 139914667465.12717,
- },
- {
- timestamp: 1717200000000,
- value: 140783758431.06125,
- },
- {
- timestamp: 1717286400000,
- value: 140938344621.71402,
- },
- {
- timestamp: 1717372800000,
- value: 141998084417.63138,
- },
- {
- timestamp: 1717459200000,
- value: 140576362732.24146,
- },
- {
- timestamp: 1717545600000,
- value: 142350140219.98376,
- },
- {
- timestamp: 1717632000000,
- value: 144489824995.8935,
- },
- {
- timestamp: 1717718400000,
- value: 143873369582.8502,
- },
- {
- timestamp: 1717804800000,
- value: 139851333923.40503,
- },
- {
- timestamp: 1717891200000,
- value: 139504362600.96533,
- },
- {
- timestamp: 1717977600000,
- value: 139472790889.50482,
- },
- {
- timestamp: 1718064000000,
- value: 134258723500.63882,
- },
- {
- timestamp: 1718150400000,
- value: 135115327423.08612,
- },
- {
- timestamp: 1718236800000,
- value: 133815904283.74007,
- },
- {
- timestamp: 1718323200000,
- value: 134093306755.8546,
- },
- {
- timestamp: 1718409600000,
- value: 134652071708.52539,
- },
- {
- timestamp: 1718496000000,
- value: 135962988210.06384,
- },
- {
- timestamp: 1718582400000,
- value: 134753260036.98149,
- },
- {
- timestamp: 1718668800000,
- value: 131216214582.94562,
- },
- {
- timestamp: 1718755200000,
- value: 135239859252.39319,
- },
- ],
- value: 135239859252.39319,
- },
- txCount: {
- data: [
- {
- timestamp: 1710979200000,
- value: 1331198,
- },
- {
- timestamp: 1711065600000,
- value: 1323924,
- },
- {
- timestamp: 1711152000000,
- value: 1297609,
- },
- {
- timestamp: 1711238400000,
- value: 1230758,
- },
- {
- timestamp: 1711324800000,
- value: 1279190,
- },
- {
- timestamp: 1711411200000,
- value: 1315082,
- },
- {
- timestamp: 1711497600000,
- value: 1272273,
- },
- {
- timestamp: 1711584000000,
- value: 1287078,
- },
- {
- timestamp: 1711670400000,
- value: 1304561,
- },
- {
- timestamp: 1711756800000,
- value: 1239605,
- },
- {
- timestamp: 1711843200000,
- value: 1245309,
- },
- {
- timestamp: 1711929600000,
- value: 1245715,
- },
- {
- timestamp: 1712016000000,
- value: 1239577,
- },
- {
- timestamp: 1712102400000,
- value: 1211600,
- },
- {
- timestamp: 1712188800000,
- value: 1091267,
- },
- {
- timestamp: 1712275200000,
- value: 1242174,
- },
- {
- timestamp: 1712361600000,
- value: 1201522,
- },
- {
- timestamp: 1712448000000,
- value: 1177838,
- },
- {
- timestamp: 1712534400000,
- value: 1221235,
- },
- {
- timestamp: 1712620800000,
- value: 1226401,
- },
- {
- timestamp: 1712707200000,
- value: 1207941,
- },
- {
- timestamp: 1712793600000,
- value: 1213672,
- },
- {
- timestamp: 1712880000000,
- value: 1322052,
- },
- {
- timestamp: 1712966400000,
- value: 1162426,
- },
- {
- timestamp: 1713052800000,
- value: 1133064,
- },
- {
- timestamp: 1713139200000,
- value: 1187906,
- },
- {
- timestamp: 1713225600000,
- value: 1178451,
- },
- {
- timestamp: 1713312000000,
- value: 1164902,
- },
- {
- timestamp: 1713398400000,
- value: 1235484,
- },
- {
- timestamp: 1713484800000,
- value: 1182165,
- },
- {
- timestamp: 1713571200000,
- value: 1152540,
- },
- {
- timestamp: 1713657600000,
- value: 1133785,
- },
- {
- timestamp: 1713744000000,
- value: 1178253,
- },
- {
- timestamp: 1713830400000,
- value: 1199365,
- },
- {
- timestamp: 1713916800000,
- value: 1171434,
- },
- {
- timestamp: 1714003200000,
- value: 1186539,
- },
- {
- timestamp: 1714089600000,
- value: 1177416,
- },
- {
- timestamp: 1714176000000,
- value: 1103918,
- },
- {
- timestamp: 1714262400000,
- value: 1140939,
- },
- {
- timestamp: 1714348800000,
- value: 1224677,
- },
- {
- timestamp: 1714435200000,
- value: 1262466,
- },
- {
- timestamp: 1714521600000,
- value: 1206626,
- },
- {
- timestamp: 1714608000000,
- value: 1223696,
- },
- {
- timestamp: 1714694400000,
- value: 1194608,
- },
- {
- timestamp: 1714780800000,
- value: 1163073,
- },
- {
- timestamp: 1714867200000,
- value: 1145911,
- },
- {
- timestamp: 1714953600000,
- value: 1190232,
- },
- {
- timestamp: 1715040000000,
- value: 1231931,
- },
- {
- timestamp: 1715126400000,
- value: 1159221,
- },
- {
- timestamp: 1715212800000,
- value: 1126649,
- },
- {
- timestamp: 1715299200000,
- value: 1154535,
- },
- {
- timestamp: 1715385600000,
- value: 1113685,
- },
- {
- timestamp: 1715472000000,
- value: 1055429,
- },
- {
- timestamp: 1715558400000,
- value: 1163122,
- },
- {
- timestamp: 1715644800000,
- value: 1182521,
- },
- {
- timestamp: 1715731200000,
- value: 1197067,
- },
- {
- timestamp: 1715817600000,
- value: 1218766,
- },
- {
- timestamp: 1715904000000,
- value: 1112590,
- },
- {
- timestamp: 1715990400000,
- value: 1082308,
- },
- {
- timestamp: 1716076800000,
- value: 1022057,
- },
- {
- timestamp: 1716163200000,
- value: 1124081,
- },
- {
- timestamp: 1716249600000,
- value: 1198696,
- },
- {
- timestamp: 1716336000000,
- value: 1188672,
- },
- {
- timestamp: 1716422400000,
- value: 1156304,
- },
- {
- timestamp: 1716508800000,
- value: 1164101,
- },
- {
- timestamp: 1716595200000,
- value: 1157033,
- },
- {
- timestamp: 1716681600000,
- value: 1139013,
- },
- {
- timestamp: 1716768000000,
- value: 1159616,
- },
- {
- timestamp: 1716854400000,
- value: 1105315,
- },
- {
- timestamp: 1716940800000,
- value: 1172771,
- },
- {
- timestamp: 1717027200000,
- value: 1149944,
- },
- {
- timestamp: 1717113600000,
- value: 1175396,
- },
- {
- timestamp: 1717200000000,
- value: 1119675,
- },
- {
- timestamp: 1717286400000,
- value: 1076974,
- },
- {
- timestamp: 1717372800000,
- value: 1152786,
- },
- {
- timestamp: 1717459200000,
- value: 1164380,
- },
- {
- timestamp: 1717545600000,
- value: 1178477,
- },
- {
- timestamp: 1717632000000,
- value: 1154720,
- },
- {
- timestamp: 1717718400000,
- value: 1184232,
- },
- {
- timestamp: 1717804800000,
- value: 1156305,
- },
- {
- timestamp: 1717891200000,
- value: 1142399,
- },
- {
- timestamp: 1717977600000,
- value: 1180168,
- },
- {
- timestamp: 1718064000000,
- value: 1177067,
- },
- {
- timestamp: 1718150400000,
- value: 1224208,
- },
- {
- timestamp: 1718236800000,
- value: 1230853,
- },
- {
- timestamp: 1718323200000,
- value: 1184071,
- },
- {
- timestamp: 1718409600000,
- value: 1137118,
- },
- {
- timestamp: 1718496000000,
- value: 1123092,
- },
- {
- timestamp: 1718582400000,
- value: 1143178,
- },
- {
- timestamp: 1718668800000,
- value: 1147395,
- },
- ],
- value: 1147395,
- },
-}
-
-export const Basic: StoryObj = {
- args: {
- data,
- },
-}
diff --git a/src/components/StatsBoxGrid/index.tsx b/src/components/StatsBoxGrid/index.tsx
index bda92a8f3a0..b017193ec08 100644
--- a/src/components/StatsBoxGrid/index.tsx
+++ b/src/components/StatsBoxGrid/index.tsx
@@ -1,31 +1,35 @@
-import { SimpleGrid } from "@chakra-ui/react"
-
import type { AllMetricData } from "@/lib/types"
-import { GridItem } from "./GridItem"
+import BigNumber from "../BigNumber"
+
import { useStatsBoxGrid } from "./useStatsBoxGrid"
type StatsBoxGridProps = {
- data: AllMetricData
+ metricResults: AllMetricData
}
+const StatsBoxGrid = ({ metricResults }: StatsBoxGridProps) => {
+ const metrics = useStatsBoxGrid(metricResults)
-const StatsBoxGrid = ({ data }: StatsBoxGridProps) => {
- const metrics = useStatsBoxGrid(data)
-
+ const gridBorderClasses = [
+ "border-b border-body-light xl:border-e xl:pe-8",
+ "border-b border-body-light xl:ps-8",
+ "border-b border-body-light xl:border-b-0 xl:border-e xl:pe-8",
+ "xl:ps-8",
+ ]
return (
-
- {metrics.map((metric, idx) => (
- (RANGES[0])
- const [selectedRangeTvl, setSelectedRangeTvl] = useState(RANGES[0])
- const [selectedRangeNodes, setSelectedRangeNodes] = useState(
- RANGES[0]
- )
- const [selectedRangeTxs, setSelectedRangeTxs] = useState(RANGES[0])
-
const localeForNumberFormat = getLocaleForNumberFormat(locale! as Lang)
const totalEtherStaked =
"error" in totalEthStaked
? { error: totalEthStaked.error }
: {
- data: totalEthStaked.data,
value: formatTotalStaked(totalEthStaked.value, localeForNumberFormat),
}
const valueLocked =
"error" in totalValueLocked
? { error: totalValueLocked.error }
- : {
- data: totalValueLocked.data,
- value: formatTVL(totalValueLocked.value, localeForNumberFormat),
- }
+ : { value: formatTVL(totalValueLocked.value, localeForNumberFormat) }
const txs =
"error" in txCount
? { error: txCount.error }
- : {
- data: txCount.data,
- value: formatTxs(txCount.value, localeForNumberFormat),
- }
+ : { value: formatTxs(txCount.value, localeForNumberFormat) }
const nodes =
"error" in nodeCount
? { error: nodeCount.error }
- : {
- data: nodeCount.data,
- value: formatNodes(nodeCount.value, localeForNumberFormat),
- }
+ : { value: formatNodes(nodeCount.value, localeForNumberFormat) }
const metrics: StatsBoxMetric[] = [
{
apiProvider: "Dune Analytics",
apiUrl: "https://dune.com/",
- title: t("page-index-network-stats-total-eth-staked"),
- description: t("page-index-network-stats-total-eth-staked-explainer"),
- buttonContainer: (
-
Activity from all Ethereum networks
-
From 25d3a5623f4f0b0045b6fddb08e620fd6e48e2dd Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 31 Jul 2024 20:20:35 -0700
Subject: [PATCH 042/273] style: add focus animation to SvgButtonLink
---
src/components/Buttons/SvgButtonLink.tsx | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/src/components/Buttons/SvgButtonLink.tsx b/src/components/Buttons/SvgButtonLink.tsx
index 92ddc2a3735..93c6552fab3 100644
--- a/src/components/Buttons/SvgButtonLink.tsx
+++ b/src/components/Buttons/SvgButtonLink.tsx
@@ -18,10 +18,16 @@ const SvgButtonLink = ({
className,
...props
}: SvgButtonLinkProps) => (
-
+
-
)
}
From 9af99e1e282983b03936f6cbc9b2acc79aaceeb1 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 31 Jul 2024 20:18:07 -0700
Subject: [PATCH 039/273] revamp: metric api fetching data schema
---
src/lib/api/fetchNodes.ts | 21 +++++-------------
src/lib/api/fetchTotalEthStaked.ts | 28 ++++++++----------------
src/lib/api/fetchTotalValueLocked.ts | 23 ++++----------------
src/lib/api/fetchTxCount.ts | 23 ++++++--------------
src/lib/constants.ts | 3 +--
src/lib/types.ts | 32 ++++++----------------------
6 files changed, 32 insertions(+), 98 deletions(-)
diff --git a/src/lib/api/fetchNodes.ts b/src/lib/api/fetchNodes.ts
index 37f22e7f9ec..c3d58684e27 100644
--- a/src/lib/api/fetchNodes.ts
+++ b/src/lib/api/fetchNodes.ts
@@ -1,8 +1,4 @@
-import type {
- EtherscanNodeResponse,
- MetricReturnData,
- TimestampedData,
-} from "@/lib/types"
+import type { EtherscanNodeResponse, MetricReturnData } from "@/lib/types"
import { DAYS_TO_FETCH, ETHERSCAN_API_URL } from "@/lib/constants"
@@ -33,18 +29,11 @@ export const fetchNodes = async (): Promise{value}
-
- {children}
- {sourceName && sourceUrl && (
-
-
-
-
- {sourceName}
-
-
- )}
-
+ {value ? (
+ <>
+ {value}
+
+ {children}
+ {sourceName && sourceUrl && (
+
+
+
+
+ {sourceName}
+
+
+ )}
+
+
+ ) : (
+ {t("loading-error-refresh")}
+ )}
- {metric.apiProvider}
-
-)
-
-type GridItemProps = {
- metric: StatsBoxMetric
-}
-
-// ChartJS config
-ChartJS.register(
- CategoryScale,
- LinearScale,
- PointElement,
- LineElement,
- Filler,
- // to avoid a production error, we must include this plugin even if we do
- // not use it (we are using it on the energy consumption chart)
- ChartDataLabels
-)
-
-export const GridItem = ({ metric }: GridItemProps) => {
- const { title, description, state, buttonContainer, range } = metric
- const hasError = "error" in state
- const hasData = "data" in state
-
- const value = hasError ? (
-
- {RANGES.map((range, idx) => (
-
- ))}
-
-)
diff --git a/src/components/StatsBoxGrid/StatsBoxGrid.stories.tsx b/src/components/StatsBoxGrid/StatsBoxGrid.stories.tsx
deleted file mode 100644
index f728befcea7..00000000000
--- a/src/components/StatsBoxGrid/StatsBoxGrid.stories.tsx
+++ /dev/null
@@ -1,1195 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import ChartComponent from "."
-
-const meta = {
- title: "Molecules / Display Content / Charts / StatsBoxGrid",
- component: ChartComponent,
-} satisfies Meta
+ {metrics.map(({ label, apiProvider, apiUrl, state }, idx) => (
+
+ {label}
+
))}
-
+
)
}
diff --git a/src/components/StatsBoxGrid/useStatsBoxGrid.tsx b/src/components/StatsBoxGrid/useStatsBoxGrid.tsx
index 1651b0a801a..91b8a9acc01 100644
--- a/src/components/StatsBoxGrid/useStatsBoxGrid.tsx
+++ b/src/components/StatsBoxGrid/useStatsBoxGrid.tsx
@@ -1,4 +1,8 @@
-import { useState } from "react"
+/**
+ * TODO: Update metric for new homepage:
+ * - Replace TVL DeFi with "Total value held on Ethereum"
+ * - Replace Node Count with "Average transaction cost"
+ */
import { useRouter } from "next/router"
import { useTranslation } from "next-i18next"
@@ -6,10 +10,6 @@ import type { AllMetricData, Lang, StatsBoxMetric } from "@/lib/types"
import { getLocaleForNumberFormat } from "@/lib/utils/translations"
-import { RANGES } from "@/lib/constants"
-
-import { RangeSelector } from "./RangeSelector"
-
const formatTotalStaked = (amount: number, locale: string): string => {
return new Intl.NumberFormat(locale, {
notation: "compact",
@@ -52,124 +52,54 @@ export const useStatsBoxGrid = ({
const { t } = useTranslation("page-index")
const { locale } = useRouter()
- const [selectedRangeTotalStaked, setSelectedRangeTotalStaked] =
- useState
- {/* TODO: Plug in real data */}
-
- Total value held on Ethereum
-
-
-
- Transactions in the last 24h
-
-
-
- Average transaction cost
-
-
-
- Value protecting Ethereum
-
-
+
-
-
+
+
{label &&
{label}
} From 3efa41cfc21f35cd614f3555bf25f1008adb9d17 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 31 Jul 2024 20:51:39 -0700 Subject: [PATCH 043/273] feat: implement calendar data --- src/components/WindowBox/index.tsx | 2 +- src/pages/index.tsx | 51 +++++++++++------------------- 2 files changed, 20 insertions(+), 33 deletions(-) diff --git a/src/components/WindowBox/index.tsx b/src/components/WindowBox/index.tsx index 6bdca8ac714..f233a02ba12 100644 --- a/src/components/WindowBox/index.tsx +++ b/src/components/WindowBox/index.tsx @@ -7,7 +7,7 @@ type WindowBoxProps = { } const WindowBox = ({ title, children, Svg }: WindowBoxProps) => ( -
+
-
- {imageUrl && (
+
+ {imageUrl ? (
// eslint-disable-next-line @next/next/no-img-element
+ ) : (
+
+
Builder's Portal
Documentation
@@ -411,25 +410,24 @@ const HomePage = ({
Ethereum.org community is the perfect place to start and learn.
-
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2b0fe7ccc2a..0d4189cbae1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from "next-i18next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
import { FaDiscord, FaGithub } from "react-icons/fa"
import { MdChevronRight } from "react-icons/md"
-import { RxExternalLink } from "react-icons/rx"
import { Flex, Skeleton } from "@chakra-ui/react"
import type { AllMetricData, BasePageProps, Lang } from "@/lib/types"
@@ -46,7 +45,7 @@ import events from "@/data/community-events.json"
import { BASE_TIME_UNIT, GITHUB_REPO_URL } from "@/lib/constants"
-import { Button, ButtonLink } from "../../tailwind/ui/buttons/Button"
+import { ButtonLink } from "../../tailwind/ui/buttons/Button"
import CreateWalletContent from "!!raw-loader!@/data/CreateWallet.js"
import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
@@ -160,11 +159,6 @@ const HomePage = ({
},
]
- // TODO: Remove when used
- console.log("Values to use:", {
- communityEvents,
- })
-
const SubHeroCTAs = [
{
label: "Pick a wallet",
@@ -224,26 +218,6 @@ const HomePage = ({
},
]
- const dummyCalendarData = [
- {
- date: "May 29, 2024 at 18:00",
- title: "ethereum.org Community Call - May 2024",
- },
- {
- date: "Jul 25, 2024",
- title: "☎️ ethereum.org Community Call - July 2024",
- },
- {
- date: "Jul 3, 2024",
- title: "🛠 QA session - ethereum.org portal",
- },
- {
- date: "May 8, 2024",
- title:
- "👾 Live coding session - Implementing a visual testing component on ethereum.org",
- },
- ]
-
const comingSoon = [
{ title: "Ethereum news", tag: "" },
{ title: "Join ethereum.org", tag: "" },
@@ -255,6 +229,10 @@ const HomePage = ({
)
.slice(0, 3) // Show 3 events ending soonest
+ const calendar = communityEvents.upcomingEventData
+ .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+ .slice(0, 4) // Show next 4 events on the calendar
+
return (
- {dummyCalendarData.map(({ date, title }, idx) => (
+ {calendar.map(({ date, title, calendarLink }, idx) => (
))}
From 9947bbe5feea97bdf8bb9f72f934d6089b3d2290 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 1 Aug 2024 09:45:54 -0700
Subject: [PATCH 044/273] feat: Event fallback image, see all button
---
public/images/event-fallback.svg | 32 ++++++++++++++++++++++++++++++++
src/pages/index.tsx | 20 ++++++++++++++++----
2 files changed, 48 insertions(+), 4 deletions(-)
create mode 100644 public/images/event-fallback.svg
diff --git a/public/images/event-fallback.svg b/public/images/event-fallback.svg
new file mode 100644
index 00000000000..3e03c83f6a0
--- /dev/null
+++ b/public/images/event-fallback.svg
@@ -0,0 +1,32 @@
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0d4189cbae1..5e9aedab9b1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -56,6 +56,7 @@ import { fetchNodes } from "@/lib/api/fetchNodes"
import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked"
import { fetchTotalValueLocked } from "@/lib/api/fetchTotalValueLocked"
import { fetchTxCount } from "@/lib/api/fetchTxCount"
+import EventFallback from "@/public/images/event-fallback.svg"
import buildersImage from "@/public/images/heroes/developers-hub-hero.jpg"
import activityImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
import learnImage from "@/public/images/heroes/learn-hub-hero.png"
@@ -499,6 +500,8 @@ const HomePage = ({
href={href}
className="md:w-1/3 md:max-w-128"
key={title}
+ target="_blank"
+ rel="noopener noreferrer"
>
-
-
+ Add to calendar
+
{date}
++ {new Intl.DateTimeFormat(locale, { + month: "long", + day: "2-digit", + year: "numeric", + hour: "numeric", + minute: "numeric", + }).format(new Date(date))} +
@@ -544,6 +548,14 @@ const HomePage = ({
)}
+
+ See all events
+
{/* Temporary coming soon section template */}
{comingSoon.map((item) => (
From df69cc226815a7b8ce31e9aaed1ddeaa16b0efeb Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 1 Aug 2024 09:57:53 -0700
Subject: [PATCH 045/273] theme: add "lg" button size
large text, larger padding, larger border radius; for initial use on homepage
---
tailwind/ui/buttons/Button.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/tailwind/ui/buttons/Button.tsx b/tailwind/ui/buttons/Button.tsx
index 79d9eec6da9..99d19962ae1 100644
--- a/tailwind/ui/buttons/Button.tsx
+++ b/tailwind/ui/buttons/Button.tsx
@@ -21,6 +21,7 @@ const buttonVariants = cva(
link: "border-transparent font-bold underline py-0 px-1 active:text-primary",
},
size: {
+ lg: "text-lg py-3 px-8 [&>svg]:text-2xl rounded-lg",
md: "min-h-10.5 px-4 py-2 [&>svg]:text-2xl",
sm: "text-xs min-h-[31px] py-1.5 px-2 [&>svg]:text-md",
},
From 40bf4b7a14dad9f555788f2ef2aa1a469c673290 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 1 Aug 2024 09:59:30 -0700
Subject: [PATCH 046/273] refactor: use button size "lg" on homepage
---
src/pages/index.tsx | 27 +++++++++++++--------------
1 file changed, 13 insertions(+), 14 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5e9aedab9b1..63b7142a05d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -312,10 +312,7 @@ const HomePage = ({
))}
-
+
Other topics
@@ -340,13 +337,15 @@ const HomePage = ({
+
-
+
More on ethereum.org
@@ -551,7 +549,8 @@ const HomePage = ({
See all events
From 9a750cc69fccb874320351743885ac9fa79b9035 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 1 Aug 2024 10:46:59 -0700
Subject: [PATCH 047/273] feat: add Join ethereum.org section
---
src/components/icons/layer-2.svg | 6 +++
src/pages/index.tsx | 77 +++++++++++++++++++++++++++-----
src/styles/global.css | 31 ++++++-------
tailwind.config.ts | 3 +-
4 files changed, 88 insertions(+), 29 deletions(-)
create mode 100644 src/components/icons/layer-2.svg
diff --git a/src/components/icons/layer-2.svg b/src/components/icons/layer-2.svg
new file mode 100644
index 00000000000..f32bf2d5d96
--- /dev/null
+++ b/src/components/icons/layer-2.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 63b7142a05d..6fdf664695d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,7 +3,7 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next"
import { useRouter } from "next/router"
import { useTranslation } from "next-i18next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import { FaDiscord, FaGithub } from "react-icons/fa"
+import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"
import { MdChevronRight } from "react-icons/md"
import { Flex, Skeleton } from "@chakra-ui/react"
@@ -20,6 +20,7 @@ import BlockHeap from "@/components/icons/block-heap.svg"
import Calendar from "@/components/icons/calendar.svg"
import EthTokenIcon from "@/components/icons/eth-token.svg"
import PickWalletIcon from "@/components/icons/eth-wallet.svg"
+import Layer2Icon from "@/components/icons/layer-2.svg"
import ChooseNetworkIcon from "@/components/icons/network-layers.svg"
import TryAppsIcon from "@/components/icons/phone-homescreen.svg"
import RoadmapSign from "@/components/icons/roadmap-sign.svg"
@@ -219,10 +220,7 @@ const HomePage = ({
},
]
- const comingSoon = [
- { title: "Ethereum news", tag: "" },
- { title: "Join ethereum.org", tag: "" },
- ]
+ const comingSoon = [{ title: "Ethereum news", tag: "" }]
const upcomingEvents = events
.sort(
@@ -438,7 +436,7 @@ const HomePage = ({
key={title}
className={cn(
"flex flex-col justify-between gap-6 border-t px-6 py-4 xl:flex-row",
- idx === 0 && "bg-accent-gradient"
+ idx === 0 && "bg-accent-gradient-a"
)}
>
) => {
const { t } = useTranslation(["common", "page-index"])
const { locale, asPath } = useRouter()
@@ -220,8 +227,6 @@ const HomePage = ({
},
]
- const comingSoon = [{ title: "Ethereum news", tag: "" }]
-
const upcomingEvents = events
.sort(
(a, b) => new Date(a.endDate).getTime() - new Date(b.endDate).getTime()
@@ -477,10 +482,33 @@ const HomePage = ({
{/* TODO: News sub-section */}
- {/* Temporary coming soon section template */}
- {comingSoon.map((item) => (
-
+
-
+
👷♀️🚧🔜
+
Date: Mon, 5 Aug 2024 16:29:16 -0700
Subject: [PATCH 053/273] refactor: colors.css for foundational palettes
---
src/styles/colors.css | 82 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 82 insertions(+)
create mode 100644 src/styles/colors.css
diff --git a/src/styles/colors.css b/src/styles/colors.css
new file mode 100644
index 00000000000..1baa20355e5
--- /dev/null
+++ b/src/styles/colors.css
@@ -0,0 +1,82 @@
+@tailwind base;
+
+/* FOUNDATIONAL COLOR PALETTE DECLARATIONS */
+
+@layer base {
+ :root {
+ --white: #ffffff;
+ --gray-100: #f7f7f7;
+ --gray-200: #e7e7e7;
+ --gray-300: #c8c8c8;
+ --gray-400: #8c8c8c;
+ --gray-500: #616161;
+ --gray-600: #333333;
+ --gray-700: #222222;
+ --gray-800: #1b1b1b;
+ --gray-900: #141414;
+ --black: #000000;
+
+ --purple-100: #e2d3fb;
+ --purple-200: #d1baf7;
+ --purple-300: #c0a1f3;
+ --purple-400: #af88ef;
+ --purple-500: #8558e9;
+ --purple-600: #6c24df;
+ --purple-700: #561bb5;
+ --purple-800: #41128b;
+ --purple-900: #2b0961;
+
+ --pink-100: #fde7f3;
+ --pink-200: #fbcfeb;
+ --pink-300: #ee8cc3;
+ --pink-400: #ee58ab;
+ --pink-500: #f53fa1;
+ --pink-600: #e51d7f;
+ --pink-700: #c70f63;
+ --pink-800: #891247;
+ --pink-900: #38212e;
+
+ --blue-100: #e8f1ff;
+ --blue-200: #cadffb;
+ --blue-300: #88aaf1;
+ --blue-400: #6995f7;
+ --blue-500: #4473ef;
+ --blue-600: #3c4ceb;
+ --blue-700: #2b36a8;
+ --blue-800: #232f71;
+ --blue-900: #1b273a;
+
+ --cyan-100: #e3f7f5;
+ --cyan-200: #b8faf6;
+ --cyan-300: #80ebe1;
+ --cyan-400: #50cec1;
+ --cyan-500: #1aa99e;
+ --cyan-600: #29948f;
+ --cyan-700: #1e6766;
+ --cyan-800: #1c4545;
+ --cyan-900: #1f312f;
+
+ --orange-100: #FFF0DB;
+ --orange-200: #FFD7A7;
+ --orange-300: #FEB077;
+ --orange-400: #FD8640;
+ --orange-500: #FB610E;
+ --orange-600: #EC4A0A;
+ --orange-700: #C4350A;
+ --orange-800: #7D2711;
+ --orange-900: #3A291D;
+
+ --red-100: #f7c8c8;
+ --red-500: #b80000;
+ /* ! Deprecating 900, error.neutral */
+ --red-900: #180c0c;
+
+ --green-100: #ddf4e4;
+ --green-500: #0a7146;
+ /* ! Deprecating 900, success.neutral */
+ --green-900: #0a160e;
+
+ --yellow-200: #fff8df;
+ --yellow-500: #bd8400;
+ }
+}
From 7a2a14029e1362e0599e21b2b55802bf5c6109e6 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:30:15 -0700
Subject: [PATCH 054/273] refactor: semantic-tokens.css for css theme tokens
---
src/styles/semantic-tokens.css | 83 ++++++++++++++++++++++++++++++++++
1 file changed, 83 insertions(+)
create mode 100644 src/styles/semantic-tokens.css
diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
new file mode 100644
index 00000000000..3ff3d46ad16
--- /dev/null
+++ b/src/styles/semantic-tokens.css
@@ -0,0 +1,83 @@
+@tailwind base;
+
+/* SEMANTIC TOKEN DECLARATIONS: Abstracted from color palettes for theming */
+
+/**
+* Color palette semantic breakdown ([brackets] denote dark mode):
+*
+* 100: low-contrast
+* 200: [high-contrast]
+* 300: [hover]
+* 400: [DEFAULT]
+* 500: neutral, [neutral]
+* 600: DEFAULT
+* 700: hover
+* 800: high-contrast
+* 900: [low-contrast]
+*/
+
+@layer base {
+ /* Light mode (default) token declarations */
+ :root {
+ --body: var(--gray-800);
+ --body-medium: var(--gray-500);
+ --body-light: var(--gray-200);
+
+ --background: white;
+ --background-highlight: var(--gray-100);
+
+ --primary: var(--purple-600);
+ --primary-hover: var(--purple-700);
+ --primary-low-contrast: var(--purple-100);
+ --primary-high-contrast: var(--purple-800);
+
+ --accent-a: var(--blue-600);
+ --accent-a-hover: var(--blue-700);
+ --accent-a-low-contrast: var(--blue-100);
+ --accent-a-high-contrast: var(--blue-800);
+
+ --accent-b: var(--pink-600);
+ --accent-b-hover: var(--pink-700);
+ --accent-b-low-contrast: var(--pink-100);
+ --accent-b-high-contrast: var(--pink-800);
+
+ --accent-c: var(--cyan-600);
+ --accent-c-hover: var(--cyan-700);
+ --accent-c-low-contrast: var(--cyan-100);
+ --accent-c-high-contrast: var(--cyan-800);
+ }
+
+ /* Dark mode token declarations */
+ [data-theme="dark"] {
+ --body: var(--gray-100);
+ --body-medium: var(--gray-400);
+ --body-light: var(--gray-600);
+
+ --background: var(--gray-800);
+ --background-highlight: var(--gray-900);
+
+ --primary: var(--purple-400);
+ --primary-hover: var(--purple-300);
+ --primary-low-contrast: var(--purple-900);
+ --primary-high-contrast: var(--purple-200);
+ --primary-neutral: var(--purple-500);
+
+ --accent-a: var(--blue-400);
+ --accent-a-hover: var(--blue-300);
+ --accent-a-low-contrast: var(--blue-900);
+ --accent-a-high-contrast: var(--blue-200);
+ --accent-a-neutral: var(--blue-500);
+
+ --accent-b: var(--pink-400);
+ --accent-b-hover: var(--pink-300);
+ --accent-b-low-contrast: var(--pink-900);
+ --accent-b-high-contrast: var(--pink-200);
+ --accent-b-neutral: var(--pink-500);
+
+ --accent-c: var(--cyan-400);
+ --accent-c-hover: var(--cyan-300);
+ --accent-c-low-contrast: var(--cyan-900);
+ --accent-c-high-contrast: var(--cyan-200);
+ --accent-c-neutral: var(--cyan-500);
+ }
+}
From 16d0d6cc9655054e4dfb05baa19ec72d765b566d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:32:39 -0700
Subject: [PATCH 055/273] refactor: rm extracted colors/tokens, use import
rm some deprecated/unused tokens; linting
---
src/styles/global.css | 187 ++++++++----------------------------------
1 file changed, 36 insertions(+), 151 deletions(-)
diff --git a/src/styles/global.css b/src/styles/global.css
index 7f0fcd07a6e..2e1fa576a1f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,136 +2,22 @@
@tailwind components;
@tailwind utilities;
+@import "./colors.css";
+@import "./semantic-tokens.css";
+
@layer base {
:root {
--font-inter: Inter, sans-serif;
--font-mono: "IBM Plex Mono", Courier, monospace;
- /* Primitive Color Scheme */
- --gray-100: #f7f7f7;
- --gray-150: #f2f2f2;
- --gray-200: #e7e7e7;
- --gray-300: #c8c8c8;
- --gray-400: #8c8c8c;
- --gray-500: #616161;
- --gray-600: #333333;
- --gray-700: #222222;
- --gray-800: #1b1b1b;
- --gray-900: #141414;
-
- --purple-100: #f1eafa;
- --purple-200: #e2d3fb;
- --purple-250: #d1baf7;
- --purple-300: #c0a1f3;
- --purple-400: #ba96ea;
- --purple-500: #af88ef;
- --purple-600: #8c56d1;
- --purple-700: #7b43c2;
- --purple-750: #6c24df;
- --purple-800: #561bb5;
- --purple-850: #41128b;
- --purple-900: #342b40;
- --purple-950: #2b0961;
-
- --blue-50: #f6f6ff;
- --blue-100: #ebebff;
- --blue-200: #d6d6ff;
- --blue-300: #9999ff;
- --blue-400: #5555ff;
- --blue-500: #1c1cff;
- --blue-600: #000066;
- --blue-700: #0000a3;
- --blue-800: #000066;
- --blue-900: #000029;
-
- --pink-100: #FDE7F3;
- --pink-200: #FBCFEB;
- --pink-300: #EE8CC3;
- --pink-400: #EE58AB;
- --pink-500: #F53FA1;
- --pink-600: #E51D7F; /* Light: secondary */
- --pink-700: #C70F63;
- --pink-800: #891247;
- --pink-900: #38212E;
-
- --blue-100: #E8F1FF;
- --blue-200: #CADFFB;
- --blue-300: #88AAF1;
- --blue-400: #6995F7;
- --blue-500: #4473EF;
- --blue-600: #3C4CEB; /* Light: tertiary */
- --blue-700: #2B36A8;
- --blue-800: #232F71;
- --blue-900: #1B273A;
-
- --green-100: #E3F7F5;
- --green-200: #B8FAF6;
- --green-300: #80EBE1;
- --green-400: #50CEC1;
- --green-500: #1AA99E;
- --green-600: #29948F; /* Light: quaternary */
- --green-700: #1E6766;
- --green-800: #1C4545;
- --green-900: #1F312F;
-
- --orange-50: #fff3ed;
- --orange-100: #ffe5d6;
- --orange-200: #ffcbad;
- --orange-300: #ffb18f;
- --orange-400: #ff985c;
- --orange-500: #ff7324;
- --orange-550: #df5a0e;
- --orange-600: #b84300;
- --orange-700: #7a2d00;
- --orange-800: #521e00;
- --orange-900: #2f1000;
-
- --red-100: #f7c8c8;
- --red-500: #b80000;
- /* ! Deprecating 900 */
- --red-900: #180c0c;
-
- --green-100: #ddf4e4;
- /* ! Deprecating 400 */
- --green-400: #48bb78;
- --green-500: #0a7146;
- /* ! Deprecating 900 */
- --green-900: #0a160e;
-
- --yellow-200: #fff8df;
- --yellow-500: #bd8400;
-
/* Semantic Colors: Light mode */
- --primary: var(--purple-750);
- --primary-high-contrast: var(--purple-850);
- --primary-low-contrast: var(--purple-200);
- --primary-hover: var(--purple-800);
- --primary-visited: var(--purple-800);
/* ! Deprecating primary-light */
--primary-light: var(--blue-100);
/* ! Deprecating primary-dark */
--primary-dark: var(--blue-700);
- /* ! Deprecating primary-pressed */
- --primary-pressed: var(--blue-400);
-
- --body: var(--gray-800);
- --body-medium: var(--gray-500);
- --body-light: var(--gray-200);
- /* ! Deprecating body-inverted */
- --body-inverted: var(--gray-100);
-
- --background: white;
- --background-highlight: var(--gray-100);
-
- --secondary: var(--pink-600); /* #c32e8a; */
- --tertiary: var(--blue-600);
- --quaternary: var(--green-600);
--disabled: var(--gray-400);
- /* ! Deprecating neutral */
- --neutral: white;
-
/* Complementary Set */
--attention: var(--yellow-500);
--attention-light: var(--yellow-200);
@@ -154,47 +40,44 @@
--tooltip-shadow: rgba(0, 0, 0, 0.24);
--switch-background: var(--gray-300);
--hub-hero-content-bg: rgba(255, 255, 255, 0.8);
- --bg-main-gradient: linear-gradient(102.7deg,
- rgba(185, 185, 241, 0.2) 0%,
- rgba(84, 132, 234, 0.2) 51.56%,
- rgba(58, 142, 137, 0.2) 100%);
+ --bg-main-gradient: linear-gradient(
+ 102.7deg,
+ rgba(185, 185, 241, 0.2) 0%,
+ rgba(84, 132, 234, 0.2) 51.56%,
+ rgba(58, 142, 137, 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);
- --primary-highlight-gradient: linear-gradient(180deg, rgba(167, 121, 226, 0.05) 0%, rgba(167, 121, 226, 0.00) 100%);
- --accent-gradient-a: linear-gradient(0deg, rgba(185, 185, 241, 0.24) 0%, rgba(84, 132, 234, 0.08) 100%);
- --accent-gradient-b: radial-gradient(127.67% 82.36% at 50% -30.36%, rgba(201, 179, 245, 0.16)0%, rgba(201, 179, 245, 0.48)33%, rgba(136, 170, 241, 0.16)66%, rgba(255, 255, 255, 0.00)100%)
+ --primary-highlight-gradient: linear-gradient(
+ 180deg,
+ rgba(167, 121, 226, 0.05) 0%,
+ rgba(167, 121, 226, 0) 100%
+ );
+ --accent-gradient-a: linear-gradient(
+ 0deg,
+ rgba(185, 185, 241, 0.24) 0%,
+ rgba(84, 132, 234, 0.08) 100%
+ );
+ --accent-gradient-b: radial-gradient(
+ 127.67% 82.36% at 50% -30.36%,
+ rgba(201, 179, 245, 0.16) 0%,
+ rgba(201, 179, 245, 0.48) 33%,
+ rgba(136, 170, 241, 0.16) 66%,
+ rgba(255, 255, 255, 0) 100%
+ );
}
[data-theme="dark"] {
/* Semantic Colors: Dark mode */
- --primary: var(--purple-500);
- --primary-high-contrast: var(--purple-250);
- --primary-low-contrast: var(--purple-950);
- --primary-hover: var(--purple-300);
- --primary-visited: var(--purple-300);
/* ! Deprecating primary-light */
--primary-light: var(--orange-100);
/* ! Deprecating primary-dark */
--primary-dark: var(--orange-800);
- /* ! Deprecating primary-pressed */
- --primary-pressed: var(--orange-800);
-
- --body: var(--gray-100);
- --body-medium: var(--gray-400);
- --body-light: var(--gray-600);
- /* ! Deprecating body-inverted */
- --body-inverted: var(--gray-800);
-
- --background: var(--gray-800);
- --background-highlight: var(--gray-900);
--disabled: var(--gray-500);
- /* ! Deprecating neutral */
- --neutral: var(--gray-900);
-
/* Complementary Set */
--attention-outline: var(--attention-light);
@@ -210,10 +93,12 @@
--tooltip-shadow: rgba(255, 255, 255, 0.24);
--switch-background: rgba(255, 255, 255, 0.24);
--hub-hero-content-bg: rgba(34, 34, 34, 0.8);
- --bg-main-gradient: linear-gradient(102.7deg,
- rgba(185, 185, 241, 0.2) 0%,
- rgba(84, 132, 234, 0.2) 51.56%,
- rgba(58, 142, 137, 0.2) 100%);
+ --bg-main-gradient: linear-gradient(
+ 102.7deg,
+ rgba(185, 185, 241, 0.2) 0%,
+ rgba(84, 132, 234, 0.2) 51.56%,
+ rgba(58, 142, 137, 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);
@@ -276,8 +161,8 @@
li {
margin-bottom: calc(1.45rem / 2);
- &>ol,
- &>ul {
+ & > ol,
+ & > ul {
margin-inline-start: 1.45rem;
margin-block: calc(1.45rem / 2);
margin-top: calc(1.45rem / 2);
@@ -287,7 +172,7 @@
@apply last:mb-0;
}
- &>p {
+ & > p {
margin-bottom: calc(1.45rem / 2);
}
}
@@ -298,4 +183,4 @@
samp {
@apply font-monospace text-base leading-base;
}
-}
\ No newline at end of file
+}
From fd2da24346d7d47c4b1d0c9a077ecb126abf167c Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:33:27 -0700
Subject: [PATCH 056/273] refactor: tailwind color tokens
---
src/pages/index.tsx | 12 ++++++------
tailwind.config.ts | 34 +++++++++++++++++++++-------------
2 files changed, 27 insertions(+), 19 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 573a50f122e..2bd4e83f74a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -181,21 +181,21 @@ const HomePage = ({
description: "The currency of Ethereum",
href: "/get-eth/",
Svg: EthTokenIcon,
- colorClass: "text-secondary",
+ colorClass: "text-accent-a",
},
{
label: "Choose a network",
description: "Enjoy minimal fees",
href: "/layer-2/", // TODO: Update with new networks page when ready
Svg: ChooseNetworkIcon,
- colorClass: "text-tertiary",
+ colorClass: "text-accent-b",
},
{
label: "Try apps",
description: "See what Ethereum can do",
href: "/dapps/",
Svg: TryAppsIcon,
- colorClass: "text-quaternary",
+ colorClass: "text-accent-c",
},
]
@@ -633,7 +633,7 @@ const HomePage = ({
Svg={Layer2Icon}
label="How to contribute"
href="/contributing/"
- className="text-quaternary"
+ className="text-accent-c"
>
-
+
+ {/* Temporary coming soon section template */}
+ {comingSoon.map((item) => (
+
- {/* Temporary coming soon section template */}
- {comingSoon.map((item) => (
-
)
diff --git a/src/styles/global.css b/src/styles/global.css
index 301acb869f5..d126a4a7727 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -124,18 +124,17 @@
--tooltip-shadow: rgba(0, 0, 0, 0.24);
--switch-background: var(--gray-300);
--hub-hero-content-bg: rgba(255, 255, 255, 0.8);
- --bg-main-gradient: linear-gradient(
- 102.7deg,
- rgba(185, 185, 241, 0.2) 0%,
- rgba(84, 132, 234, 0.2) 51.56%,
- rgba(58, 142, 137, 0.2) 100%
- );
+ --bg-main-gradient: linear-gradient(102.7deg,
+ rgba(185, 185, 241, 0.2) 0%,
+ rgba(84, 132, 234, 0.2) 51.56%,
+ rgba(58, 142, 137, 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);
--primary-highlight-gradient: linear-gradient(180deg, rgba(167, 121, 226, 0.05) 0%, rgba(167, 121, 226, 0.00) 100%);
- --accept-gradient: linear-gradient(0deg, rgba(185, 185, 241, 0.24) 0%, rgba(84, 132, 234, 0.08) 100%);
+ --accent-gradient-a: linear-gradient(0deg, rgba(185, 185, 241, 0.24) 0%, rgba(84, 132, 234, 0.08) 100%);
+ --accent-gradient-b: radial-gradient(127.67% 82.36% at 50% -30.36%, rgba(201, 179, 245, 0.16)0%, rgba(201, 179, 245, 0.48)33%, rgba(136, 170, 241, 0.16)66%, rgba(255, 255, 255, 0.00)100%)
}
[data-theme="dark"] {
@@ -181,12 +180,10 @@
--tooltip-shadow: rgba(255, 255, 255, 0.24);
--switch-background: rgba(255, 255, 255, 0.24);
--hub-hero-content-bg: rgba(34, 34, 34, 0.8);
- --bg-main-gradient: linear-gradient(
- 102.7deg,
- rgba(185, 185, 241, 0.2) 0%,
- rgba(84, 132, 234, 0.2) 51.56%,
- rgba(58, 142, 137, 0.2) 100%
- );
+ --bg-main-gradient: linear-gradient(102.7deg,
+ rgba(185, 185, 241, 0.2) 0%,
+ rgba(84, 132, 234, 0.2) 51.56%,
+ rgba(58, 142, 137, 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);
@@ -249,8 +246,8 @@
li {
margin-bottom: calc(1.45rem / 2);
- & > ol,
- & > ul {
+ &>ol,
+ &>ul {
margin-inline-start: 1.45rem;
margin-block: calc(1.45rem / 2);
margin-top: calc(1.45rem / 2);
@@ -260,7 +257,7 @@
@apply last:mb-0;
}
- & > p {
+ &>p {
margin-bottom: calc(1.45rem / 2);
}
}
@@ -271,4 +268,4 @@
samp {
@apply font-monospace text-base leading-base;
}
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9e184204d6a..193f939d0df 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -90,7 +90,8 @@ const config = {
backgroundImage: {
"bg-main-gradient": "var(--bg-main-gradient)",
"primary-highlight-gradient": "var(--primary-highlight-gradient)",
- "accent-gradient": "var(--accept-gradient)",
+ "accent-gradient-a": "var(--accent-gradient-a)",
+ "accent-gradient-b": "var(--accent-gradient-b)",
},
boxShadow: {
"table-box": "var(--table-box-shadow)",
From 80ee0053e28c74764e0415d9c47bc71c27698cd9 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 2 Aug 2024 18:04:30 -0700
Subject: [PATCH 048/273] build: yarn add -D xml2js @types/xml2js
---
package.json | 4 +++-
yarn.lock | 25 +++++++++++++++++++++++++
2 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 2d3be73046e..75ee501360f 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
"@types/node": "^20.4.2",
"@types/react": "18.2.57",
"@types/react-dom": "18.2.19",
+ "@types/xml2js": "^0.4.14",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"@typescript-eslint/parser": "^6.19.0",
"autoprefixer": "^10.4.19",
@@ -122,7 +123,8 @@
"typescript": "^5.5.2",
"unified": "^10.0.0",
"unist-util-visit": "^5.0.0",
- "usehooks-ts": "^3.1.0"
+ "usehooks-ts": "^3.1.0",
+ "xml2js": "^0.6.2"
},
"resolutions": {
"jackspeak": "2.1.1",
diff --git a/yarn.lock b/yarn.lock
index 4790756573b..c742f27bdfb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5466,6 +5466,13 @@
resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
+"@types/xml2js@^0.4.14":
+ version "0.4.14"
+ resolved "https://registry.yarnpkg.com/@types/xml2js/-/xml2js-0.4.14.tgz#5d462a2a7330345e2309c6b549a183a376de8f9a"
+ integrity sha512-4YnrRemBShWRO2QjvUin8ESA41rH+9nQGLUGZV/1IDhi3SL9OhdpNC/MrulTWuptXKwhx/aDxE7toV0f/ypIXQ==
+ dependencies:
+ "@types/node" "*"
+
"@typescript-eslint/eslint-plugin@^6.19.0":
version "6.21.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
@@ -12959,6 +12966,11 @@ sass-loader@^12.4.0:
klona "^2.0.4"
neo-async "^2.6.2"
+sax@>=0.6.0:
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
+ integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
+
scheduler@^0.23.0:
version "0.23.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -14707,6 +14719,19 @@ ws@^8.2.3:
resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
+xml2js@^0.6.2:
+ version "0.6.2"
+ resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.6.2.tgz#dd0b630083aa09c161e25a4d0901e2b2a929b499"
+ integrity sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==
+ dependencies:
+ sax ">=0.6.0"
+ xmlbuilder "~11.0.0"
+
+xmlbuilder@~11.0.0:
+ version "11.0.1"
+ resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
+ integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
+
xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
From fddb3dd0979f3946584503a532b43008356a0367 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 2 Aug 2024 18:05:47 -0700
Subject: [PATCH 049/273] feat: add fetchRSSDisplay with types/constants
---
src/lib/api/fetchRSSDisplay.ts | 43 +++++++++++++++++++++++++++++++
src/lib/constants.ts | 7 +++++
src/lib/types.ts | 47 ++++++++++++++++++++++++++++++++++
3 files changed, 97 insertions(+)
create mode 100644 src/lib/api/fetchRSSDisplay.ts
diff --git a/src/lib/api/fetchRSSDisplay.ts b/src/lib/api/fetchRSSDisplay.ts
new file mode 100644
index 00000000000..08615e983d8
--- /dev/null
+++ b/src/lib/api/fetchRSSDisplay.ts
@@ -0,0 +1,43 @@
+import { parseString } from "xml2js"
+
+import { RSS_DISPLAY_COUNT, XML_FEEDS } from "../constants"
+import type { RSSChannel, RSSItem } from "../types"
+
+export const fetchRSSDisplay = async () => {
+ const parsedRssItems: RSSItem[] = []
+
+ await Promise.all(
+ XML_FEEDS.map(async (url) => {
+ const response = await fetch(url)
+ const xml = await response.text()
+
+ parseString(xml, (err, result) => {
+ if (err) {
+ console.error(err)
+ return
+ }
+ const mainChannel: RSSChannel = result.rss.channel[0]
+ const source = mainChannel.title[0]
+ mainChannel.item.forEach(({ pubDate, title, link, description }) => {
+ const item = {
+ pubDate: pubDate[0],
+ title: title[0],
+ link: link[0],
+ content: description[0],
+ source,
+ } as RSSItem
+
+ parsedRssItems.push(item)
+ })
+ })
+ })
+ )
+
+ const sortedRssItems = parsedRssItems.sort(
+ (a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
+ )
+
+ const rssItemsForDisplay = sortedRssItems.slice(0, RSS_DISPLAY_COUNT)
+
+ return rssItemsForDisplay
+}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 387c7a1e6f4..2db13d1c260 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -156,3 +156,10 @@ export const DESKTOP_LANGUAGE_BUTTON_NAME = "desktop-language-button"
// Codeblock
export const LINES_BEFORE_COLLAPSABLE = 8
+
+// RSS Feeds
+export const RSS_DISPLAY_COUNT = 3
+export const XML_FEEDS = [
+ "https://vitalik.eth.limo/feed.xml",
+ "https://blog.ethereum.org/en/feed.xml",
+]
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 2e882116c85..2a10ef06b43 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -742,3 +742,50 @@ export type GHLabel = {
name: string
color: string
}
+
+/**
+ * RSS Feed handling
+ */
+export type RSSItem = {
+ pubDate: string
+ title: string
+ source: string
+ content: string
+ link: string
+}
+
+export type RSSChannel = {
+ title: string[]
+ link: string[]
+ description: string[]
+ lastBuildDate: string[]
+ docs: string[]
+ generator: string[]
+ image: {
+ url: string[]
+ title: string[]
+ link: string[]
+ }[]
+ copyright: string[]
+ item: {
+ title: string[]
+ link: string[]
+ guid: string[]
+ pubDate: string[]
+ description: string[]
+ category: string[]
+ enclosure: {
+ $: {
+ url: string[]
+ length: string[]
+ type: string[]
+ }
+ }[]
+ }[]
+}
+
+export type RSSResult = {
+ rss: {
+ channel: RSSChannel[]
+ }
+}
From 4af341d6baa972b58ac95e0bd64efe3f4e7529a7 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 2 Aug 2024 18:07:39 -0700
Subject: [PATCH 050/273] init: RSS feed for homepage
---
src/pages/index.tsx | 42 +++++++++++++++++++++++++++++++++++-------
1 file changed, 35 insertions(+), 7 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6fdf664695d..979cc63d597 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,7 +7,7 @@ import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"
import { MdChevronRight } from "react-icons/md"
import { Flex, Skeleton } from "@chakra-ui/react"
-import type { AllMetricData, BasePageProps, Lang } from "@/lib/types"
+import type { AllMetricData, BasePageProps, Lang, RSSItem } from "@/lib/types"
import type { CodeExample, CommunityEventsReturnType } from "@/lib/interfaces"
import SvgButtonLink from "@/components/Buttons/SvgButtonLink"
@@ -54,6 +54,7 @@ import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
import SimpleWalletContent from "!!raw-loader!@/data/SimpleWallet.sol"
import { fetchCommunityEvents } from "@/lib/api/calendarEvents"
import { fetchNodes } from "@/lib/api/fetchNodes"
+import { fetchRSSDisplay } from "@/lib/api/fetchRSSDisplay"
import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked"
import { fetchTotalValueLocked } from "@/lib/api/fetchTotalValueLocked"
import { fetchTxCount } from "@/lib/api/fetchTxCount"
@@ -73,6 +74,7 @@ const cachedFetchTxCount = runOnlyOnce(fetchTxCount)
type Props = BasePageProps & {
communityEvents: CommunityEventsReturnType
metricResults: AllMetricData
+ rssItems: RSSItem[]
}
export const getStaticProps = (async ({ locale }) => {
@@ -98,6 +100,9 @@ export const getStaticProps = (async ({ locale }) => {
lastDeployDate
)
+ // load RSS feed items
+ const rssItems = await fetchRSSDisplay()
+
return {
props: {
...(await serverSideTranslations(locale!, requiredNamespaces)),
@@ -105,6 +110,7 @@ export const getStaticProps = (async ({ locale }) => {
contentNotTranslated,
lastDeployLocaleTimestamp,
metricResults,
+ rssItems,
},
revalidate: BASE_TIME_UNIT * 24,
}
@@ -113,6 +119,7 @@ export const getStaticProps = (async ({ locale }) => {
const HomePage = ({
communityEvents,
metricResults,
+ rssItems,
}: InferGetStaticPropsTypeWe have many community events scheduled around the globe
@@ -517,7 +520,7 @@ const HomePage = ({
className="max-w-full object-cover object-center"
/>
) : (
-
@@ -556,10 +559,62 @@ const HomePage = ({
+
+
+ {/* TODO: Fix icon sizing, fix button/icon layout on mobile */}
+ Join ethereum.org
++ This website is open source with hundreds of community + contributors. You can propose edits to any of the content on this + site. +
+
+
+
+
+
+
+
+
+
+
+ + Find out all the different ways you can help ethereum.org grow + and be better. +
++ Contribute to code, content, articles etc. +
++ To ask questions, coordinate contribution and join community + calls. +
++ To keep up with our updates and important news. +
+The latest blog posts and updates from the community
+
+ {rssItems.map(({ title, link, content, source, pubDate }) => (
+
+
+
+
+
+ ))}
+ + {new Intl.DateTimeFormat(locale, { + month: "long", + day: "numeric", + year: "numeric", + }).format(new Date(pubDate))} +
+{title}
+
+ {source}
+
+ {content}
+We have many community events scheduled around the globe
From 9d224e945710538c91614b4c996aaaf98c44a36d Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sun, 4 Aug 2024 19:30:21 -0700 Subject: [PATCH 051/273] theme: add sec/tert/quat color arrays --- src/pages/index.tsx | 12 ++++++------ src/styles/global.css | 36 +++++++++++++++++++++++++++++++++--- tailwind.config.ts | 12 ++++++++---- 3 files changed, 47 insertions(+), 13 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 979cc63d597..70c9da393e6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -181,21 +181,21 @@ const HomePage = ({ description: "The currency of Ethereum", href: "/get-eth/", Svg: EthTokenIcon, - colorClass: "text-accent-a", + colorClass: "text-secondary", }, { label: "Choose a network", description: "Enjoy minimal fees", href: "/layer-2/", // TODO: Update with new networks page when ready Svg: ChooseNetworkIcon, - colorClass: "text-accent-b", + colorClass: "text-tertiary", }, { label: "Try apps", description: "See what Ethereum can do", href: "/dapps/", Svg: TryAppsIcon, - colorClass: "text-accent-c", + colorClass: "text-quaternary", }, ] @@ -603,7 +603,7 @@ const HomePage = ({ Svg={Layer2Icon} label="How to contribute" href="/contributing/" - className="text-accent-c" + className="text-quaternary" >Find out all the different ways you can help ethereum.org grow @@ -614,7 +614,7 @@ const HomePage = ({ Svg={FaGithub} label="GitHub" href={GITHUB_REPO_URL} - className="text-accent-a" + className="text-secondary" >
Contribute to code, content, articles etc. @@ -635,7 +635,7 @@ const HomePage = ({ Svg={FaTwitter} label="Twitter" href="https://x.com/EthDotOrg" - className="text-accent-b" + className="text-tertiary" >
To keep up with our updates and important news. diff --git a/src/styles/global.css b/src/styles/global.css index d126a4a7727..7f0fcd07a6e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -44,6 +44,36 @@ --blue-800: #000066; --blue-900: #000029; + --pink-100: #FDE7F3; + --pink-200: #FBCFEB; + --pink-300: #EE8CC3; + --pink-400: #EE58AB; + --pink-500: #F53FA1; + --pink-600: #E51D7F; /* Light: secondary */ + --pink-700: #C70F63; + --pink-800: #891247; + --pink-900: #38212E; + + --blue-100: #E8F1FF; + --blue-200: #CADFFB; + --blue-300: #88AAF1; + --blue-400: #6995F7; + --blue-500: #4473EF; + --blue-600: #3C4CEB; /* Light: tertiary */ + --blue-700: #2B36A8; + --blue-800: #232F71; + --blue-900: #1B273A; + + --green-100: #E3F7F5; + --green-200: #B8FAF6; + --green-300: #80EBE1; + --green-400: #50CEC1; + --green-500: #1AA99E; + --green-600: #29948F; /* Light: quaternary */ + --green-700: #1E6766; + --green-800: #1C4545; + --green-900: #1F312F; + --orange-50: #fff3ed; --orange-100: #ffe5d6; --orange-200: #ffcbad; @@ -93,9 +123,9 @@ --background: white; --background-highlight: var(--gray-100); - --accent-a: #C32E8A; - --accent-b: #3C4CEB; - --accent-c: #29948F; + --secondary: var(--pink-600); /* #c32e8a; */ + --tertiary: var(--blue-600); + --quaternary: var(--green-600); --disabled: var(--gray-400); diff --git a/tailwind.config.ts b/tailwind.config.ts index 193f939d0df..147eb9e4dae 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -49,10 +49,14 @@ const config = { dark: "var(--primary-dark)", pressed: "var(--primary-pressed)", }, - accent: { - a: "var(--accent-a)", - b: "var(--accent-b)", - c: "var(--accent-c)", + secondary: { + DEFAULT: "var(--secondary)", + }, + tertiary: { + DEFAULT: "var(--tertiary)", + }, + quaternary: { + DEFAULT: "var(--quaternary)", }, body: { DEFAULT: "var(--body)", From 6bff04aef2280073cdaf538bb90b3a22d5ee70b8 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sun, 4 Aug 2024 19:45:53 -0700 Subject: [PATCH 052/273] init: homepage bento box template --- src/pages/index.tsx | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 70c9da393e6..573a50f122e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -269,10 +269,40 @@ const HomePage = ({ ))}
+
+
+
+
+ Use Cases
+
+ + A new way to use the internet +
+
+
+ Crypto without volatility
+
+
+ A fairer financial system
+
+
+ Innovative apps
+
+
+ The network of networks
+
+
+ The internet of assets
+Find out all the different ways you can help ethereum.org grow @@ -644,7 +644,7 @@ const HomePage = ({ Svg={FaGithub} label="GitHub" href={GITHUB_REPO_URL} - className="text-secondary" + className="text-accent-a" >
Contribute to code, content, articles etc. @@ -665,7 +665,7 @@ const HomePage = ({ Svg={FaTwitter} label="Twitter" href="https://x.com/EthDotOrg" - className="text-tertiary" + className="text-accent-b" >
To keep up with our updates and important news.
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 147eb9e4dae..31e56aedf4b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -44,19 +44,28 @@ const config = {
"high-contrast": "var(--primary-high-contrast)",
"low-contrast": "var(--primary-low-contrast)",
hover: "var(--primary-hover)",
- visited: "var(--primary-visited)",
- light: "var(--primary-light)",
- dark: "var(--primary-dark)",
- pressed: "var(--primary-pressed)",
+ light: "var(--primary-light)" /* TODO: Migrate/deprecate */,
+ dark: "var(--primary-dark)" /* TODO: Migrate/deprecate */,
},
- secondary: {
- DEFAULT: "var(--secondary)",
- },
- tertiary: {
- DEFAULT: "var(--tertiary)",
- },
- quaternary: {
- DEFAULT: "var(--quaternary)",
+ accent: {
+ a: {
+ DEFAULT: "var(--accent-a)",
+ "high-contrast": "var(--accent-a-high-contrast)",
+ "low-contrast": "var(--accent-a-low-contrast)",
+ hover: "var(--accent-a-hover)",
+ },
+ b: {
+ DEFAULT: "var(--accent-b)",
+ "high-contrast": "var(--accent-b-high-contrast)",
+ "low-contrast": "var(--accent-b-low-contrast)",
+ hover: "var(--accent-b-hover)",
+ },
+ c: {
+ DEFAULT: "var(--accent-c)",
+ "high-contrast": "var(--accent-c-high-contrast)",
+ "low-contrast": "var(--accent-c-low-contrast)",
+ hover: "var(--accent-c-hover)",
+ },
},
body: {
DEFAULT: "var(--body)",
@@ -69,7 +78,6 @@ const config = {
highlight: "var(--background-highlight)",
},
disabled: "var(--disabled)",
- neutral: "var(--neutral)",
"tooltip-shadow": "var(--tooltip-shadow)",
"switch-background": "var(--switch-background)",
"hub-hero-content-bg": "var(--hub-hero-content-bg)",
From c4ea9cf8dd49cd19435efcc0313ffef2418114b2 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:34:10 -0700
Subject: [PATCH 057/273] deprecate: switchBackground
---
src/@chakra-ui/semanticTokens.ts | 1 -
src/components/Search/utils.ts | 4 ----
tailwind.config.ts | 1 -
3 files changed, 6 deletions(-)
diff --git a/src/@chakra-ui/semanticTokens.ts b/src/@chakra-ui/semanticTokens.ts
index 9b81ae3c21a..7ffe96fb922 100644
--- a/src/@chakra-ui/semanticTokens.ts
+++ b/src/@chakra-ui/semanticTokens.ts
@@ -91,7 +91,6 @@ const semanticTokens = {
_light: "blackAlpha.400",
_dark: "whiteAlpha.400",
},
- switchBackground: { _light: "gray.300", _dark: "whiteAlpha.400" },
hubHeroContentBg: {
_light: "rgba(255, 255, 255, 0.80)",
_dark: "rgba(34, 34, 34, 0.80)",
diff --git a/src/components/Search/utils.ts b/src/components/Search/utils.ts
index 70cd1c19a99..7f734780604 100644
--- a/src/components/Search/utils.ts
+++ b/src/components/Search/utils.ts
@@ -160,10 +160,6 @@ export const getSearchModalStyles = (): SystemStyleObject => ({
color: "body.base",
},
- ".DocSearch-Hit-Select-Icon:focus, .DocSearch-Hit-Select-Icon:hover": {
- color: "switchBackground", // TODO: Remove? Causing low contrast in dark mode
- },
-
".DocSearch-Footer": {
"--docsearch-footer-height": "space.10",
"--docsearch-logo-color": "colors.body.light",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 31e56aedf4b..3086d8b78d5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -79,7 +79,6 @@ const config = {
},
disabled: "var(--disabled)",
"tooltip-shadow": "var(--tooltip-shadow)",
- "switch-background": "var(--switch-background)",
"hub-hero-content-bg": "var(--hub-hero-content-bg)",
attention: {
DEFAULT: "var(--attention)",
From a4768c6f98545113fb31a72e61acf9992b2d077f Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:34:41 -0700
Subject: [PATCH 058/273] feat: add `banner` gradient token
---
src/styles/global.css | 8 ++++++++
tailwind.config.ts | 1 +
2 files changed, 9 insertions(+)
diff --git a/src/styles/global.css b/src/styles/global.css
index 2e1fa576a1f..6b35aa283c4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -67,6 +67,14 @@
rgba(136, 170, 241, 0.16) 66%,
rgba(255, 255, 255, 0) 100%
);
+
+ --gradient-banner: radial-gradient(
+ 155% 100% at 50% 0%,
+ rgba(201, 179, 245, 0.16) 0%,
+ rgba(201, 179, 245, 0.48) 33%,
+ rgba(136, 170, 241, 0.16) 66%,
+ rgba(255, 255, 255, 0) 100%
+ );
}
[data-theme="dark"] {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3086d8b78d5..30af08e367e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -103,6 +103,7 @@ const config = {
"primary-highlight-gradient": "var(--primary-highlight-gradient)",
"accent-gradient-a": "var(--accent-gradient-a)",
"accent-gradient-b": "var(--accent-gradient-b)",
+ "gradient-banner": "var(--gradient-banner)",
},
boxShadow: {
"table-box": "var(--table-box-shadow)",
From 00728a8f91e9c48d2116c4f6be0e00fcc1db2a80 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:33:09 -0700
Subject: [PATCH 059/273] refactor: fetchRSS
---
src/lib/api/fetchRSS.ts | 51 ++++++++++++++++++++++++++++++++++
src/lib/api/fetchRSSDisplay.ts | 43 ----------------------------
2 files changed, 51 insertions(+), 43 deletions(-)
create mode 100644 src/lib/api/fetchRSS.ts
delete mode 100644 src/lib/api/fetchRSSDisplay.ts
diff --git a/src/lib/api/fetchRSS.ts b/src/lib/api/fetchRSS.ts
new file mode 100644
index 00000000000..b05b410b0d9
--- /dev/null
+++ b/src/lib/api/fetchRSS.ts
@@ -0,0 +1,51 @@
+import { parseString } from "xml2js"
+
+import type { RSSChannel, RSSItem, RSSResult } from "../types"
+
+/**
+ * Fetches RSS feed from the specified XML URL(s).
+ * @param xmlUrl - The URL(s) of the XML feed to fetch.
+ * @returns An array of RSS items containing the publication date, title, link, and source.
+ */
+export const fetchRSS = async (xmlUrl: string | string[]) => {
+ const urls = Array.isArray(xmlUrl) ? xmlUrl : [xmlUrl]
+ const allItems: RSSItem[] = []
+ for (const url of urls) {
+ const rssItems = (await fetchXml(url)) as RSSResult
+ const mainChannel: RSSChannel = rssItems.rss.channel[0]
+ const source = mainChannel.title[0]
+ const parsedRssItems = mainChannel.item.map(
+ ({ pubDate, title, link, enclosure }) =>
+ ({
+ pubDate: pubDate[0],
+ title: title[0],
+ link: link[0],
+ imgSrc: enclosure ? enclosure[0].$.url : "",
+ source,
+ sourceFeedUrl: url,
+ }) as RSSItem
+ )
+ allItems.push(...parsedRssItems)
+ }
+ return allItems as RSSItem[]
+}
+
+/**
+ * Fetches XML data from the specified URL.
+ * Parses XML to JSON with parseString (xml2js package)
+ * @param url - The URL to fetch the XML data from.
+ * @returns A promise that resolves to the parsed XML data as a JSON object.
+ */
+export const fetchXml = async (url: string) => {
+ const response = await fetch(url)
+ const xml = await response.text()
+ let returnObject: Record
+
+ Ethereum news +
The latest blog posts and updates from the community
-
- {rssItems.map(({ title, link, content, source, pubDate }) => (
+
+
+ {rssItems.map(({ title, link, imgSrc, source, pubDate }) => (
-
-
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
-
+
+
))}
+ {source}
+
{new Intl.DateTimeFormat(locale, { month: "long", @@ -499,18 +512,17 @@ const HomePage = ({ year: "numeric", }).format(new Date(pubDate))}
-{title}
-
- {source}
-
- {content}
+{title}
+
+ Ethereum events +
We have many community events scheduled around the globe
@@ -586,7 +598,7 @@ const HomePage = ({
See all events
-
+
From abedbfc919807daf7530f14542eb36b3995e8aa3 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 19:22:24 -0700
Subject: [PATCH 063/273] feat: add Attestant blog for rss feeds
---
public/images/attestant-logo.svg | 22 +++++++++++++++++
src/lib/api/fetchAttestantPosts.ts | 38 ++++++++++++++++++++++++++++++
src/lib/types.ts | 10 ++++++++
3 files changed, 70 insertions(+)
create mode 100644 public/images/attestant-logo.svg
create mode 100644 src/lib/api/fetchAttestantPosts.ts
diff --git a/public/images/attestant-logo.svg b/public/images/attestant-logo.svg
new file mode 100644
index 00000000000..9a6ca3dcde6
--- /dev/null
+++ b/public/images/attestant-logo.svg
@@ -0,0 +1,22 @@
+
+
\ No newline at end of file
diff --git a/src/lib/api/fetchAttestantPosts.ts b/src/lib/api/fetchAttestantPosts.ts
new file mode 100644
index 00000000000..38359ea0d22
--- /dev/null
+++ b/src/lib/api/fetchAttestantPosts.ts
@@ -0,0 +1,38 @@
+import type { HTMLResult, RSSItem } from "../types"
+
+import { fetchXml } from "./fetchRSS"
+
+export const fetchAttestantPosts = async () => {
+ const BASE_URL = "https://www.attestant.io/posts/"
+ const htmlData = (await fetchXml(BASE_URL)) as HTMLResult
+
+ // Extract div containing list of posts from deeply nested HTML structure
+ const attestantPostsContainer =
+ htmlData.html.body[0].div[0].div[1].div[0].div[0].div[0].div
+
+ const attestantBlogItems: RSSItem[] = attestantPostsContainer
+ .map(({ a }) => {
+ const [
+ {
+ $: { href },
+ h4: [{ _: title }],
+ div: [{ _: content }, { _: pubDate }],
+ },
+ ] = a
+ const { href: link } = new URL(href, BASE_URL)
+ return {
+ title,
+ link,
+ content,
+ source: "Attestant",
+ sourceFeedUrl: BASE_URL,
+ imgSrc: "/images/attestant-logo.svg",
+ pubDate,
+ }
+ })
+ .sort(
+ (a: RSSItem, b: RSSItem) =>
+ new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
+ )
+ return attestantBlogItems
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 56921edcefd..491b578a6d2 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -790,3 +790,13 @@ export type RSSResult = {
channel: RSSChannel[]
}
}
+
+type NestedDivs = {
+ div: NestedDivs[]
+}
+
+export type HTMLResult = {
+ html: {
+ body: Record[]
+ }
+}
From 9923d737f195657e89fa808aa53ae8c972d872a8 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 19:22:41 -0700
Subject: [PATCH 064/273] feat: activate attestant blog, cache rss results
---
src/pages/index.tsx | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6615af64331..0b089ce792b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -54,6 +54,7 @@ import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistr
import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
import SimpleWalletContent from "!!raw-loader!@/data/SimpleWallet.sol"
import { fetchCommunityEvents } from "@/lib/api/calendarEvents"
+import { fetchAttestantPosts } from "@/lib/api/fetchAttestantPosts"
import { fetchNodes } from "@/lib/api/fetchNodes"
import { fetchRSS } from "@/lib/api/fetchRSS"
import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked"
@@ -71,6 +72,8 @@ const cachedFetchTotalEthStaked = runOnlyOnce(fetchTotalEthStaked)
const cachedFetchNodes = runOnlyOnce(fetchNodes)
const cachedFetchTotalValueLocked = runOnlyOnce(fetchTotalValueLocked)
const cachedFetchTxCount = runOnlyOnce(fetchTxCount)
+const cachedXmlBlogFeeds = runOnlyOnce(async () => await fetchRSS(XML_FEEDS))
+const cachedAttestantBlog = runOnlyOnce(fetchAttestantPosts)
type Props = BasePageProps & {
communityEvents: CommunityEventsReturnType
@@ -102,7 +105,9 @@ export const getStaticProps = (async ({ locale }) => {
)
// load RSS feed items
- const rssItems = polishRSSList(await fetchRSS(XML_FEEDS)) // TODO: Cache results
+ const xmlBlogs = await cachedXmlBlogFeeds()
+ const attestantBlog = await cachedAttestantBlog()
+ const rssItems = polishRSSList(xmlBlogs, attestantBlog)
return {
props: {
From 5dceb8dce5a284c1076dff4314eb1aa27eea0822 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 19:50:58 -0700
Subject: [PATCH 065/273] fix: event fallback image
---
public/images/event-fallback.svg | 63 ++++++++++++++++----------------
1 file changed, 32 insertions(+), 31 deletions(-)
diff --git a/public/images/event-fallback.svg b/public/images/event-fallback.svg
index 3e03c83f6a0..4f3406f3f3d 100644
--- a/public/images/event-fallback.svg
+++ b/public/images/event-fallback.svg
@@ -1,32 +1,33 @@
-
-
-
Crypto without volatility
+
+
- Crypto without volatility
-
A fairer financial system
+
+
- A fairer financial system
-
Innovative apps
+
+
- Innovative apps
-
+
{imageUrl ? (
// eslint-disable-next-line @next/next/no-img-element
![]()
Date: Wed, 7 Aug 2024 14:28:24 -0700
Subject: [PATCH 068/273] refactor: upgrade css tokens to flexible pattern
---
src/styles/colors.css | 111 ++++++++++++++-------------------
src/styles/semantic-tokens.css | 16 ++---
tailwind.config.ts | 32 +++++-----
3 files changed, 72 insertions(+), 87 deletions(-)
diff --git a/src/styles/colors.css b/src/styles/colors.css
index de07ae21f40..eb3ee477395 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -4,73 +4,58 @@
@layer base {
:root {
- --white: #ffffff;
- --gray-100: #f7f7f7;
- --gray-200: #e7e7e7;
- --gray-300: #c8c8c8;
- --gray-400: #8c8c8c;
- --gray-500: #616161;
- --gray-600: #333333;
- --gray-700: #222222;
- --gray-800: #1b1b1b;
- --gray-900: #141414;
- --black: #000000;
+ --white: 255, 255, 255; /* #ffffff */
+ --gray-100: 247, 247, 247; /* #f7f7f7 */
+ --gray-200: 231, 231, 231; /* #e7e7e7 */
+ --gray-300: 200, 200, 200; /* #c8c8c8 */
+ --gray-400: 140, 140, 140; /* #8c8c8c */
+ --gray-500: 97, 97, 97; /* #616161 */
+ --gray-600: 51, 51, 51; /* #333333 */
+ --gray-700: 34, 34, 34; /* #222222 */
+ --gray-800: 27, 27, 27; /* #1b1b1b */
+ --gray-900: 20, 20, 20; /* #141414 */
+ --black: 0, 0, 0; /* #000000 */
- --purple-100: #e2d3fb;
- --purple-200: #d1baf7;
- --purple-300: #c0a1f3;
- --purple-400: #af88ef;
- --purple-500: #8558e9;
- --purple-600: #6c24df;
- --purple-700: #561bb5;
- --purple-800: #41128b;
- --purple-900: #2b0961;
- --purple-50-rgb: 241, 234, 250; /* #f1eaf9 */
- --purple-100-rgb: 226, 211, 251; /* #e2d3fb */
- --purple-800-rgb: 65, 18, 139; /* #41128b */
- --purple-900-rgb: 43, 9, 97; /* #2b0961 */
+ --purple-50: 241, 234, 250; /* #f1eaf9 */
+ --purple-100: 226, 211, 251; /* #e2d3fb */
+ --purple-200: 209, 186, 247; /* #d1baf7 */
+ --purple-300: 192, 161, 243; /* #c0a1f3 */
+ --purple-400: 175, 136, 239; /* #af88ef */
+ --purple-500: 133, 88, 233; /* #8558e9 */
+ --purple-600: 108, 36, 223; /* #6c24df */
+ --purple-700: 86, 27, 181; /* #561bb5 */
+ --purple-800: 65, 18, 139; /* #41128b */
+ --purple-900: 43, 9, 97; /* #2b0961 */
- --pink-100: #fde7f3;
- --pink-200: #fbcfeb;
- --pink-300: #ee8cc3;
- --pink-400: #ee58ab;
- --pink-500: #f53fa1;
- --pink-600: #e51d7f;
- --pink-700: #c70f63;
- --pink-800: #891247;
- --pink-900: #38212e;
- --pink-100-rgb: 253, 231, 243; /* #fde7f3 */
- --pink-200-rgb: 251, 207, 235; /* #fbcfeb */
- --pink-800-rgb: 137, 18, 71; /* #891247 */
- --pink-900-rgb: 56, 33, 46; /* #38212e */
+ --pink-100: 253, 231, 243; /* #fde7f3 */
+ --pink-200: 251, 207, 235; /* #fbcfeb */
+ --pink-300: 238, 140, 195; /* #ee8cc3 */
+ --pink-400: 238, 88, 171; /* #ee58ab */
+ --pink-500: 245, 63, 161; /* #f53fa1 */
+ --pink-600: 229, 29, 127; /* #e51d7f */
+ --pink-700: 199, 15, 99; /* #c70f63 */
+ --pink-800: 137, 18, 71; /* #891247 */
+ --pink-900: 56, 33, 46; /* #38212e */
- --blue-100: #e8f1ff;
- --blue-200: #cadffb;
- --blue-300: #88aaf1;
- --blue-400: #6995f7;
- --blue-500: #4473ef;
- --blue-600: #3c4ceb;
- --blue-700: #2b36a8;
- --blue-800: #232f71;
- --blue-900: #1b273a;
- --blue-100-rgb: 232, 241, 255; /* #e8f1ff */
- --blue-200-rgb: 202, 223, 251; /* #cadffb */
- --blue-800-rgb: 35, 47, 113; /* #232f71 */
- --blue-900-rgb: 27, 39, 58; /* #1b273a */
+ --blue-100: 232, 241, 255; /* #e8f1ff */
+ --blue-200: 202, 223, 251; /* #cadffb */
+ --blue-300: 136, 170, 241; /* #88aaf1 */
+ --blue-400: 105, 149, 247; /* #6995f7 */
+ --blue-500: 68, 115, 239; /* #4473ef */
+ --blue-600: 60, 76, 235; /* #3c4ceb */
+ --blue-700: 43, 54, 168; /* #2b36a8 */
+ --blue-800: 35, 47, 113; /* #232f71 */
+ --blue-900: 27, 39, 58; /* #1b273a */
- --cyan-100: #e3f7f5;
- --cyan-200: #b8faf6;
- --cyan-300: #80ebe1;
- --cyan-400: #50cec1;
- --cyan-500: #1aa99e;
- --cyan-600: #29948f;
- --cyan-700: #1e6766;
- --cyan-800: #1c4545;
- --cyan-900: #1f312f;
- --cyan-100-rgb: 227, 247, 245; /* #e3f7f5 */
- --cyan-200-rgb: 184, 250, 246; /* #b8faf6 */
- --cyan-800-rgb: 28, 69, 69; /* #1c4545 */
- --cyan-900-rgb: 31, 49, 47; /* #1f312f */
+ --cyan-100: 227, 247, 245; /* #e3f7f5 */
+ --cyan-200: 184, 250, 246; /* #b8faf6 */
+ --cyan-300: 128, 235, 225; /* #80ebe1 */
+ --cyan-400: 80, 206, 193; /* #50cec1 */
+ --cyan-500: 26, 169, 158; /* #1aa99e */
+ --cyan-600: 41, 148, 143; /* #29948f */
+ --cyan-700: 30, 103, 102; /* #1e6766 */
+ --cyan-800: 28, 69, 69; /* #1c4545 */
+ --cyan-900: 31, 49, 47; /* #1f312f */
--orange-100: #fff0db;
--orange-200: #ffd7a7;
diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
index 4ef8a977ebf..72fabc5cdb4 100644
--- a/src/styles/semantic-tokens.css
+++ b/src/styles/semantic-tokens.css
@@ -49,8 +49,8 @@
/* Gradients */
--gradient-primary: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--purple-50-rgb), 0.32) 0%,
- rgba(var(--purple-100-rgb), 0.56) 100%
+ rgba(var(--purple-50), 0.32) 0%,
+ rgba(var(--purple-100), 0.56) 100%
);
--gradient-accent-a: radial-gradient(
114.96% 111.8% at 100% 0%,
@@ -59,8 +59,8 @@
);
--gradient-accent-b: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--pink-100-rgb), 0.32) 0%,
- rgba(var(--pink-200-rgb), 0.48) 100%
+ rgba(var(--pink-100), 0.32) 0%,
+ rgba(var(--pink-200), 0.48) 100%
);
--gradient-accent-c: radial-gradient(
114.96% 111.8% at 100% 0%,
@@ -105,8 +105,8 @@
/* Gradients */
--gradient-primary: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--purple-800-rgb), 0.32) 0%,
- rgba(var(--purple-900-rgb), 0.56) 100%
+ rgba(var(--purple-800), 0.32) 0%,
+ rgba(var(--purple-900), 0.56) 100%
);
--gradient-accent-a: radial-gradient(
114.96% 111.8% at 100% 0%,
@@ -115,8 +115,8 @@
);
--gradient-accent-b: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--pink-800-rgb), 0.32) 0%,
- rgba(var(--pink-900-rgb), 0.48) 100%
+ rgba(var(--pink-800), 0.32) 0%,
+ rgba(var(--pink-900), 0.48) 100%
);
--gradient-accent-c: radial-gradient(
114.96% 111.8% at 100% 0%,
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5f29f2ea393..0dbcdadb764 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -40,31 +40,31 @@ const config = {
},
colors: {
primary: {
- DEFAULT: "var(--primary)",
- "high-contrast": "var(--primary-high-contrast)",
- "low-contrast": "var(--primary-low-contrast)",
- hover: "var(--primary-hover)",
+ DEFAULT: "rgb(var(--primary))",
+ "high-contrast": "rgb(var(--primary-high-contrast))",
+ "low-contrast": "rgb(var(--primary-low-contrast))",
+ hover: "rgb(var(--primary-hover))",
light: "var(--primary-light)" /* TODO: Migrate/deprecate */,
dark: "var(--primary-dark)" /* TODO: Migrate/deprecate */,
},
accent: {
a: {
- DEFAULT: "var(--accent-a)",
- "high-contrast": "var(--accent-a-high-contrast)",
- "low-contrast": "var(--accent-a-low-contrast)",
- hover: "var(--accent-a-hover)",
+ DEFAULT: "rgb(var(--accent-a))",
+ "high-contrast": "rgb(var(--accent-a-high-contrast))",
+ "low-contrast": "rgb(var(--accent-a-low-contrast))",
+ hover: "rgb(var(--accent-a-hover))",
},
b: {
- DEFAULT: "var(--accent-b)",
- "high-contrast": "var(--accent-b-high-contrast)",
- "low-contrast": "var(--accent-b-low-contrast)",
- hover: "var(--accent-b-hover)",
+ DEFAULT: "rgb(var(--accent-b))",
+ "high-contrast": "rgb(var(--accent-b-high-contrast))",
+ "low-contrast": "rgb(var(--accent-b-low-contrast))",
+ hover: "rgb(var(--accent-b-hover))",
},
c: {
- DEFAULT: "var(--accent-c)",
- "high-contrast": "var(--accent-c-high-contrast)",
- "low-contrast": "var(--accent-c-low-contrast)",
- hover: "var(--accent-c-hover)",
+ DEFAULT: "rgb(var(--accent-c))",
+ "high-contrast": "rgb(var(--accent-c-high-contrast))",
+ "low-contrast": "rgb(var(--accent-c-low-contrast))",
+ hover: "rgb(var(--accent-c-hover))",
},
},
body: {
From d6bdad0ef8b8c2a89d01247419175108ceb3c8bb Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:57:21 -0700
Subject: [PATCH 069/273] update: theming tokens
---
src/styles/semantic-tokens.css | 16 ++++++++--------
tailwind.config.ts | 11 +++++++++++
2 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
index 72fabc5cdb4..efeede2490e 100644
--- a/src/styles/semantic-tokens.css
+++ b/src/styles/semantic-tokens.css
@@ -54,8 +54,8 @@
);
--gradient-accent-a: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--blue-100-rgb), 0.32) 0%,
- rgba(var(--blue-200-rgb), 0.56) 100%
+ rgba(var(--blue-100), 0.32) 0%,
+ rgba(var(--blue-200), 0.56) 100%
);
--gradient-accent-b: radial-gradient(
114.96% 111.8% at 100% 0%,
@@ -64,8 +64,8 @@
);
--gradient-accent-c: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--cyan-100-rgb), 0.32) 0%,
- rgba(var(--cyan-200-rgb), 0.48) 100%
+ rgba(var(--cyan-100), 0.32) 0%,
+ rgba(var(--cyan-200), 0.48) 100%
);
}
@@ -110,8 +110,8 @@
);
--gradient-accent-a: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--blue-800-rgb), 0.32) 0%,
- rgba(var(--blue-900-rgb), 0.56) 100%
+ rgba(var(--blue-800), 0.32) 0%,
+ rgba(var(--blue-900), 0.56) 100%
);
--gradient-accent-b: radial-gradient(
114.96% 111.8% at 100% 0%,
@@ -120,8 +120,8 @@
);
--gradient-accent-c: radial-gradient(
114.96% 111.8% at 100% 0%,
- rgba(var(--cyan-800-rgb), 0.32) 0%,
- rgba(var(--cyan-900-rgb), 0.48) 100%
+ rgba(var(--cyan-800), 0.32) 0%,
+ rgba(var(--cyan-900), 0.48) 100%
);
}
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0dbcdadb764..f234b148611 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -151,6 +151,17 @@ const config = {
borderRadius: {
"4xl": "2rem" /* 32px */,
},
+ borderColor: {
+ primary: "rgba(var(--primary), 0.1)",
+ accent: {
+ a: "rgba(var(--accent-a), 0.1)",
+ b: "rgba(var(--accent-b), 0.1)",
+ c: "rgba(var(--accent-c), 0.1)",
+ },
+ },
+ gridTemplateColumns: {
+ bento: "2rem repeat(10, 1fr) 2rem",
+ },
},
},
plugins: [require("tailwindcss-animate")],
From 484ef2e1ccea393320919166880aca1926d48fa2 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:57:40 -0700
Subject: [PATCH 070/273] feat: extract BentoBox component
---
src/components/BentoBox/index.tsx | 43 +++++++++++++++++++++++++++++++
1 file changed, 43 insertions(+)
create mode 100644 src/components/BentoBox/index.tsx
diff --git a/src/components/BentoBox/index.tsx b/src/components/BentoBox/index.tsx
new file mode 100644
index 00000000000..8e1f1cb7a45
--- /dev/null
+++ b/src/components/BentoBox/index.tsx
@@ -0,0 +1,43 @@
+import { HTMLAttributes } from "react"
+import NextImage from "next/image"
+import { type StaticImageData } from "next/image"
+import { MdChevronRight } from "react-icons/md"
+
+import { cn } from "@/lib/utils/cn"
+
+import { ButtonLink } from "../../../tailwind/ui/buttons/Button"
+
+type BentoBoxProps = HTMLAttributes & {
+ title: string
+ action: string
+ imgSrc: StaticImageData
+ href: string
+}
+
+const BentoBox = ({
+ title,
+ children,
+ action,
+ href,
+ imgSrc,
+ className,
+}: BentoBoxProps) => (
+
The network of networks
+
+
- The network of networks
-
diff --git a/src/styles/colors.css b/src/styles/colors.css
index 1baa20355e5..c888cd6929b 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -25,6 +25,10 @@
--purple-700: #561bb5;
--purple-800: #41128b;
--purple-900: #2b0961;
+ --purple-50-rgb: 241, 234, 250; /* #f1eaf9 */
+ --purple-100-rgb: 226, 211, 251; /* #e2d3fb */
+ --purple-800-rgb: 65, 18, 139; /* #41128b */
+ --purple-900-rgb: 43, 9, 97; /* #2b0961 */
--pink-100: #fde7f3;
--pink-200: #fbcfeb;
@@ -35,6 +39,10 @@
--pink-700: #c70f63;
--pink-800: #891247;
--pink-900: #38212e;
+ --pink-100-rgb: 253, 231, 243; /* #fde7f3 */
+ --pink-200-rgb: 251, 207, 235; /* #fbcfeb */
+ --pink-800-rgb: 137, 18, 71; /* #891247 */
+ --pink-900-rgb: 56, 33, 46; /* #38212e */
--blue-100: #e8f1ff;
--blue-200: #cadffb;
@@ -45,6 +53,10 @@
--blue-700: #2b36a8;
--blue-800: #232f71;
--blue-900: #1b273a;
+ --blue-100-rgb: 232, 241, 255; /* #e8f1ff */
+ --blue-200-rgb: 202, 223, 251; /* #cadffb */
+ --blue-800-rgb: 35, 47, 113; /* #232f71 */
+ --blue-900-rgb: 27, 39, 58; /* #1b273a */
--cyan-100: #e3f7f5;
--cyan-200: #b8faf6;
@@ -55,6 +67,10 @@
--cyan-700: #1e6766;
--cyan-800: #1c4545;
--cyan-900: #1f312f;
+ --cyan-100-rgb: 227, 247, 245; /* #e3f7f5 */
+ --cyan-200-rgb: 184, 250, 246; /* #b8faf6 */
+ --cyan-800-rgb: 28, 69, 69; /* #1c4545 */
+ --cyan-900-rgb: 31, 49, 47; /* #1f312f */
--orange-100: #FFF0DB;
--orange-200: #FFD7A7;
diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
index 3ff3d46ad16..4ef8a977ebf 100644
--- a/src/styles/semantic-tokens.css
+++ b/src/styles/semantic-tokens.css
@@ -45,6 +45,28 @@
--accent-c-hover: var(--cyan-700);
--accent-c-low-contrast: var(--cyan-100);
--accent-c-high-contrast: var(--cyan-800);
+
+ /* Gradients */
+ --gradient-primary: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--purple-50-rgb), 0.32) 0%,
+ rgba(var(--purple-100-rgb), 0.56) 100%
+ );
+ --gradient-accent-a: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--blue-100-rgb), 0.32) 0%,
+ rgba(var(--blue-200-rgb), 0.56) 100%
+ );
+ --gradient-accent-b: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--pink-100-rgb), 0.32) 0%,
+ rgba(var(--pink-200-rgb), 0.48) 100%
+ );
+ --gradient-accent-c: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--cyan-100-rgb), 0.32) 0%,
+ rgba(var(--cyan-200-rgb), 0.48) 100%
+ );
}
/* Dark mode token declarations */
@@ -79,5 +101,27 @@
--accent-c-low-contrast: var(--cyan-900);
--accent-c-high-contrast: var(--cyan-200);
--accent-c-neutral: var(--cyan-500);
+
+ /* Gradients */
+ --gradient-primary: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--purple-800-rgb), 0.32) 0%,
+ rgba(var(--purple-900-rgb), 0.56) 100%
+ );
+ --gradient-accent-a: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--blue-800-rgb), 0.32) 0%,
+ rgba(var(--blue-900-rgb), 0.56) 100%
+ );
+ --gradient-accent-b: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--pink-800-rgb), 0.32) 0%,
+ rgba(var(--pink-900-rgb), 0.48) 100%
+ );
+ --gradient-accent-c: radial-gradient(
+ 114.96% 111.8% at 100% 0%,
+ rgba(var(--cyan-800-rgb), 0.32) 0%,
+ rgba(var(--cyan-900-rgb), 0.48) 100%
+ );
}
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 30af08e367e..51c3b46051c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -104,6 +104,10 @@ const config = {
"accent-gradient-a": "var(--accent-gradient-a)",
"accent-gradient-b": "var(--accent-gradient-b)",
"gradient-banner": "var(--gradient-banner)",
+ "gradient-primary": "var(--gradient-primary)",
+ "gradient-accent-a": "var(--gradient-accent-a)",
+ "gradient-accent-b": "var(--gradient-accent-b)",
+ "gradient-accent-c": "var(--gradient-accent-c)",
},
boxShadow: {
"table-box": "var(--table-box-shadow)",
From 7cc230a82895eff8278ff0b931d742b381641b64 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Aug 2024 20:36:59 -0700
Subject: [PATCH 067/273] refactor: gradient-main naming, linting
---
src/pages/index.tsx | 2 +-
src/styles/colors.css | 18 +++++++++---------
src/styles/global.css | 4 ++--
tailwind.config.ts | 3 +--
4 files changed, 13 insertions(+), 14 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 05a0239b781..189e707ec9a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -586,7 +586,7 @@ const HomePage = ({
"transition-transform duration-100 hover:scale-105 hover:transition-transform hover:duration-100"
)}
>
- The internet of assets
+
+
The internet of assets
+
+)
+
+export default BentoBox
From 977f715e8694111e24efe8897c7c6b8c9d5f384c Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 7 Aug 2024 16:11:55 -0700
Subject: [PATCH 071/273] refactor: use BentoBox component, extract data
---
src/pages/index.tsx | 92 +++++++++++++++++++++++++++++++++++++--------
1 file changed, 76 insertions(+), 16 deletions(-)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 189e707ec9a..6e0252238e7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,7 @@ import { Flex, Skeleton } from "@chakra-ui/react"
import type { AllMetricData, BasePageProps, Lang, RSSItem } from "@/lib/types"
import type { CodeExample, CommunityEventsReturnType } from "@/lib/interfaces"
+import BentoBox from "@/components/BentoBox"
import SvgButtonLink from "@/components/Buttons/SvgButtonLink"
import Codeblock from "@/components/Codeblock"
import CodeModal from "@/components/CodeModal"
@@ -66,6 +67,7 @@ import activityImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
import learnImage from "@/public/images/heroes/learn-hub-hero.png"
import communityImage from "@/public/images/heroes/quizzes-hub-hero.png"
import hero from "@/public/images/home/hero.png"
+import ImpactImage from "@/public/images/impact_transparent.png"
const cachedFetchCommunityEvents = runOnlyOnce(fetchCommunityEvents)
const cachedFetchTotalEthStaked = runOnlyOnce(fetchTotalEthStaked)
@@ -139,6 +141,76 @@ const HomePage = ({
setModalOpen(true)
}
+ const bentoBoxes: {
+ title: string
+ children: React.ReactNode
+ action: string
+ href: string
+ imgSrc: StaticImageData
+ className: string
+ }[] = [
+ {
+ title: "Crypto without volatility",
+ children:
+ "Stablecoins are currencies that maintain stable value. Their price matches the U.S. dollar or other steady asset",
+ action: "Learn more",
+ href: "/stablecoins/",
+ imgSrc: ImpactImage,
+ className: cn(
+ "bg-gradient-primary border-primary",
+ "col-span-7 col-start-5 row-span-1 row-start-1"
+ ),
+ },
+ {
+ title: "A fairer financial system",
+ children:
+ "Billions can't open bank accounts or freely use their money. Ethereum's financial system is always open and unbiased.",
+ action: "Explore DeFi",
+ href: "/defi/",
+ imgSrc: ImpactImage, // TODO: Replace
+ className: cn(
+ "bg-gradient-accent-c border-accent-c flex-col-reverse",
+ "col-span-4 col-start-2 row-span-1 row-start-2"
+ ),
+ },
+ {
+ title: "Innovative apps",
+ children:
+ "Ethereum apps work without selling your data. Protect your privacy.",
+ action: "Browse apps",
+ href: "/dapps/",
+ imgSrc: ImpactImage, // TODO: Replace
+ className: cn(
+ "bg-gradient-accent-b border-accent-b flex-col",
+ "col-span-3 col-start-6 row-span-1 row-start-2"
+ ),
+ },
+ {
+ title: "The network of networks",
+ children:
+ "Ethereum is the hub for blockchain innovation. The best project are built on Ethereum.",
+ action: "Explore benefits",
+ href: "/layer-2/", // TODO: Confirm
+ imgSrc: ImpactImage, // TODO: Replace
+ className: cn(
+ "bg-gradient-accent-a border-accent-a flex-col-reverse",
+ "col-span-3 col-start-9 row-span-2 row-start-2"
+ ),
+ },
+ {
+ title: "The internet of assets",
+ children:
+ "Arts, certificates or even real estate can be tokenized. Anything can be a tradable token. Ownership is public and verifiable.",
+ action: "More on NFTs",
+ href: "/nft/",
+ imgSrc: ImpactImage, // TODO: Replace
+ className: cn(
+ "bg-gradient-primary border-primary",
+ "col-span-7 col-start-2 row-span-1 row-start-3"
+ ),
+ },
+ ]
+
const codeExamples: CodeExample[] = [
{
title: t("page-index:page-index-developers-code-example-title-0"),
@@ -283,7 +355,7 @@ const HomePage = ({
👷♀️🚧🔜
-
+
+
+
+ {action}
+
+ {title}
+{children}
+
+
Date: Thu, 8 Aug 2024 13:37:15 -0700
Subject: [PATCH 072/273] chore: add image assets
---
public/images/man-and-dog-playing.png | Bin 0 -> 284407 bytes
public/images/man-baby-woman.png | Bin 0 -> 246514 bytes
public/images/robot-help-bar.png | Bin 0 -> 591354 bytes
3 files changed, 0 insertions(+), 0 deletions(-)
create mode 100644 public/images/man-and-dog-playing.png
create mode 100644 public/images/man-baby-woman.png
create mode 100644 public/images/robot-help-bar.png
diff --git a/public/images/man-and-dog-playing.png b/public/images/man-and-dog-playing.png
new file mode 100644
index 0000000000000000000000000000000000000000..14e75d2156ebca5f4d19862d1404462096951be2
GIT binary patch
literal 284407
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%0D^Yg9b19dk`MzLU-57kbEySkE|J@^OSUwL{qZ
zey||&-Mrl7Y+AITxNL9}tVQd!;XO5)N;!sT_2VZ!pG%IB{-A~uSq#+DwG--#;3
znHYBa=|d+tuA(EH0AC{vV}U2^>XQ5E@Kw&h%Z`nt?-fxYrzYdiqe);zir%z^lFt4l
z{NNwIO@NaM?86a#X2-wC*uq3DlGx-n0&9M@LBR(rtoQd=fEdOW%S%5>9qa{{>io@BWBrg`sMC3ScEXusx%zb>|Xf@jh)*b-=8@CiHLhA1}IgqsPQ*3|A_&
zeJKMLKe}YGVp&uBs&M!?aQAUx$Zixyt5f2%Yqq+t!zvMGWYw3bnVFd#e>H*Z`z#dw
z;#yX3EC_mRJ+3pKGA`RCFd~jy4oX|+3EqAm!9f}Wnt4|08nHYVwd2D}_JzQJH^Jej
zt+wkbZS6mBDBJ*T5$T<_uH)JAe{~*QE94r7?o(Ty$V@2t$bX)-
zmP$Fm!xAfvG`ubhk!BlRk!4iLg8_1UI`65}1W-tTzq8)!->mnA)xX_ZPNQ^+ATk`9
zm3K!mbUBYQSR*b{r@;qGwGKBSJdhzR_t-1QzG_sl_3cvc=r9J;oEkIRgeiSlz*DG*
z{5WaC_GvrjJ|l*hW=>PDH<kqwyE~IR$o(=TZhj2l+UsfRts
zs0-D;w?$;ngkep(cgLNON8Iei3~%qWH}DCiiMd~9f#0gp7!gXJ=x@}RN{5%
z%9jDI->GD*JrAEg=L!dI2*-8bPtDQ6Zro&`MOtl1%u$DBMfLd=96eaJ)=ZHs)wNms
z85GJ?we~l~AlSA&2(A`g=R1`XzRw6PN;^5?A|Hk%76<*r!N~`_eek2EK&vzCpS2kG
z0tc!xoMDDAd#Fs>N9EXB^OK#qRfP~0YeeA$_6IxG_)?K1ZD4kXr`G54BZ7;ZVlibP
zMLHRX5OUeSe(o?AJCD#W4PA{@t{>?yk)b@h#b5Si&+x^Z!^n%Z4_)W(!wv5AGBxP~2UL7k9VfP@LcdDDLiFpt!q3
zf#6o9-AfHFYw;}t&YQGns
zXdU$0A3<@Rq^9zGV2)i>JQa3RxUdmT8lmpkDTstvGn$ufSu4<&NQ+4iE=EsqTLk*#
zR5KscT#fH~%lB1D#bh85n~8oz+QpQi-i0GyK0!k4x&!Omi;c8)gQ~$w^Z}Uds_agE
zK8jh;X%NG1D5ZFLD*uTz_|w3P%t!jooEj1Xl8}|E>CS
z*gspP-3~GeV%MFc#FhzS3PVv3-C~sI0kIPCQr_tMU7H+%7M(M+cF@tHa4=t|E-shM
z$Oh>J8V*`6UQ<1Zi7f?Jyw+1=CqO$
zN%JEkldz9Jbvp{Pa-e)beu}YEm>hF$*_Uvt>-=r*^J$o;`Kii1$iy~v6uLjR=B@k1pTgjAJEqvNNuJ>?E`eD6SA^M
z1==#1KItT@qeiun1k@q`v|<-gQ$pi19W}?>&QRRpQI?|*V2;H71@S+nk64agEKY^meO<~FcKnymueQKA>ND{)x
zQCIZ^bqp^6B``k5a+&vT?|(=VfZxxFLkh2#L+em&Ytb`#yBitL?o%c~rHKGtm-Da(
z##VW#2(NmNId&BR*Oo5TQDW?Z&4?n_aeO6n>NmR~PZU;Q#V@yd&soSoNf~p!$-lr_
z;M|3%p9H8H)%b_T4W&PB>R9z^Ms{byD$tCsl$P*}%$g
z-Dw-Q{q(kxh)+5y?MMUg4L>x-Nmu|xV#c3OVOjl|3}
zJL*+m-tB;=@fe+qD7`hEnz8lQ2aT-(jPVExc|F2X)|@zg8?;CcmQNzYE`>#5H6{7q
zmGGnjWl_sq_rSLS`F^AV%V8pd#&F53-8}VDW~o*7{y`1rQ}aTQa-rwWRaiXMWkMWQ
z`e7E`5#=?_-o5P~@d6tbih)>$iSwa*0W@3J(S`->Wqg_kzDaf2bx_x$v`7{UE6
z!Bl!^?a456Hvnfx-KEQ{CV;5Mods7b3ScroSa;aFKXTP}Zl@85RDwGvxbjoXcdEoj
zb#)`0CXA>K!XgbWLi1SWH0)Qxi)6EZTMK2JyZ&=had&U%-T=fZtIp5un9TNdWc3=2
z&5B-Ke+=u&^1B_wqk9klN;vS8+!!8rF2VnOza-VMqF&HT#>VQ>hP^PY9uPz$`>8@l#|`11BJ!Yvb?pWTYXTUcFnU
zqw5nS3!;hplX3p!*~TYKHVyX}ak5@tj$HenCAk{;KjRuN*_1DP-Q^JEqkbU3Yvpgu
z2i^Iwp4PvS9-4qYDxLd<~JG_+{_X9}M`{FLkwMqck|DcL%|n}6K+YMVZE2lu(nuJhqJ
zuzxSwu`&GPZ|F?z7XdDgQjGg&(-1YHoc8LOAL#p&%-=2qD#qVBPA_Q9vN5vTtS&)1
zf8D%pun;L;(k=w}?b7qk_n^ci2>IkSn%7Nq
zdepb*PZUhgTZZqKdxEnvYy6*&OJ;%H7W=GUOgX-xb5NjQLuIaaanuT!%Z#^
zXTR|!<44q0c9J&8xwc+4yZqEu2s~y^HI(REUVZC1ydv*<4X+GXF&iu1^HjF`I5?04
z0k(LZmZIcHa1e4cIT*Ji$qpV?WTSqP*zx6GT8RN@SL)}oeh||v?5WS+rkBo67-h>q
zdY%m{QPGN5)3u5b|EMiSYcWD2V|!cE12vJ64)hw^gG{!-q$g1M|872cMciv4PhC9^>r#gKfb{*cRCFlO
zws6(x#8tVeW@en+6v~3haqc^*r&#x;1W_~2+wZ6E6)h%8o8{OyHVWTm2i78LI6<+$
zYPe~5KP6CSnscvHq(?%=qD55quK2Jbf(hNUZ4DzEKw5EBt6NzPtC}9wwyw)Qja8b$
zS7bqUk@mHBlY9Mw?%TAkJ;vQWvk8wzULiz$oXOa?z_ACVB@_(D#n~G9xxbm5>cLZo
zz3V5V4t_nX+Dw>_5%+#=4#xo=x6hBOycV`~WoWKqK)7rN7Rj)}-y-mY^g
zSq#-BNavs8F!SmXAXJJ&A0>ny0f9jR~@@_G@-*#QlaHI77l`6%Hi&q*GOS0
zas?Lp@nHpAZ47=3LT8Gxmt9^AcU;Ro2i-gK@_zv`^?-l!
z2`r20yDncQw3cg2bOHWt;dQ~!+X1iY^169Quhd-BCu6V@(bXsuf$p>*YgRe)bQDq5
z;yG9mo`>4AUL=M7h5h!|DKB6XROYKECBD${A$tVoy2L`2k-i$(P8lb1_)+t_r;6}l%(l{VJ3o21Ut>UlKm
z`So06Op&s9{xGkh5)&c4h-k7}|E6!y((>^WZe)0SRwkE~adqZyDdtbwDdl5EZ<^PE
z&1#C9K&r27GW>PPLGvHqW!$$NoIZ8GG4i`ZdVz#U92{Ly&5WB~ExCf)Ou5e<$Gv~z
z5`Un}la9C~##v)woCYG*HYq!IZNrS1k9E7_$(k7>%SxV4dz)B#K7ade_$Gb^tGPQY
z0sIx4d_pg7H=pmJj1&chQ;OBw(QNz-_)-bhXxnuY7M@!(H=bJw==U9Ayco{2meU9C|)2
zga-?gqZ^A_O?-l%8+>#LD|`aKMU_`WBsGEuoJ;5HK}#3*qw-9|cU@j~ub9WLzX>|`
zc;&O;fZfKW?o7125rxEv0280Ui&|!l)})ZjtJ67Cll^V#ZDFh5Y`jyU^S?9jj&fkvSufoQwtVfT
z{$%UlGQX?ngiblJ?Xo`iO}Gw~H~(>>;dGkjuj>V0BpD8Z)
z9a=nxPf!7~e{-#G|GS%s5ng$VT(068nBTJ$VaZK&`~n$6zS-8DKOrT3&^RM^iKc9jG#_mVxr1B*PHUS<+SQzS(Qu5r|*@y!?1*_&z3MA%ZHAU{tndSW{J)qorx
z5KAWRCz7<#I@&L0%IxYD#OBZ?z*57)UWfzXpN}oY+NfwOoqQ!glrP_PmbH9ntG;UO
zsi^6-`?tG6jcpIhFPFMwS9QttKNK~USC_UFsRm^w=aIyeOhn~*DrHe?dkbb<=28m}
zymynZYQM#>3SBiRk_-_Yjb3^-%{eP}VCG3F+GVi%>+G>G$pIb_fd>Y@%hF%>
zKw!^+;3SPnf(a@V2aO}ed$HEmbc2*&bNvA(21bI-D`Oo@v%t6G16ljpn6Dq$Tth*C
zM!;JUY+xre&;m5>5vugtm
zj*;?tF-XzNqMy9#1KW^9EnR2?r&)`$n7kjYcOpTps@BKr77<5c>m|-$@|8|%R#ygsITB{6m>S8DOk~>8f_TknHg5&S{3Gh4?rKj2!AlBX+t6oK1
zUzHi|s)cpbl8O<3$A4Kuswq9oSu-~?eZ}~zvIvuj;t)M8BuFLXIVih`uSSrPe?WBh
zArxHsc{QQ%&?s&Fz$5IYT@sCeby;J5wskBj3(I&aVJ~F;L440C#!+b)xzOVmYqQ6a
z0=Dl0E9aJ|tsgW+n9lDKN3Z7VyC{6-*--J{b|svdE2|`l7-*Q{)i=Fr>2G}Nu~Des
z6R|rWA|kLah{D-=psp>u;R|AV{Mtm@2IesiX!mr#Ewd@MRrkE&%Njwoej`L(N9g$x
z(Eq7uCs%3FKPf_FI@&%u(6PFZzBv9`UtSDs1*tpmdk%m!vy!!YYXOp=vTL`(^Y5yJQES6hG-3X;iD@OK4#Hv+x7#v`f^S$rdm4--TM{pQ9
zhU2@4KH)^y`}+-Z#8kYR%$}d-AvcvbZ>k(W=NrKPrf``s`n=^0LjK&XJ2>pl*aI^%t3pU(
ziNg}U-r_Mn#MV)rdcL;17Q{JT0KbIyt0*D}ZJfkU&dgKt;){@)eGb6`9MjNu(pk*f?fb8|u`
zMH~#UWCd-&xXy0kqoj-SiP^I5FNc8z?nFW3Qhql3R;bPZaKri;3xSN-M9p=e(ly;}
zTWXHD(#pBMjH2dLFsk_M4NNrhsLT#p*0wS|T!FG#qxV(wpRF8}maQ}3uAIx32`a<&#JtFEA$xNeEI55
zr+c4m*;S0m;z(RDqm$2RWPM4wn^2mKCS80xp1TpsS*K#hrY?b6V#n^L0`55a(3hU1
z>@s9EiJ7;OmqmiA8+`*$5cTZji8E~e-2m&jQ-Z7`Bm$KsPWzKp1m`NcvI>gFuMZlc
zar_6MvaR$aVdoz8skABi8XeB>n!u;~TZ-%2w!eLUdJ`)tcWkAcZbL>M2R?}HeHYJu
zBbt$}GS(FyTHwSFuuLzpS%Bi1PRYkXWWPL0OZ;MFMGyO!`SL>UTV3<3Si^>z)4pM+
zS#hqN+RE;2jrK8NI1K^IC!L;y?$uMs(|o(hN^obb=gY+t;>(NG8o4w9dK9pJ6qwm4
zTRgAyw3(3AU2>-YdR$&#YjfG=eUQR-wxMAVGb9U}n`>bE=wgl?FM$tOe|`_(BV!8e
zT>!<)kqsPa(*7)|7*f-(*8KzaRiciqmqa+IH`Uzmyzg{$H|6@xHScd}dH_8zQ@~oS
zb2DBf08_Z9&xrhxmMzA`tkw_2Rc8Wqc6AW>KR6M%XP*SE_Ip%q)cUCkyd2G>&<{_9
zrUQn8?+(fo=zoc9Zr*=VY!DLl<#FzgsqH}bJU*AzLF_yr-2skuFhK9C3G(=!#tTJt
zE&tVR)9G(8xZiH^FZo9EcGmYYp2Bz%a2^a=xD@PPz9Wp-tR9t(3Q{r|QRc77F$qW#$IVLP-sBgMZ+?l8Q
zBT-MaH2=FY8hSJ|vznv`NKzEV`@nGR5j(K+#g95(c!Uu0JbjVxObzM>AC=6xpF{vp
zZxOoRAj0b^Q|mJ}L(UkM2bGsVd$t9`Ai!h~(1$+X^zfc$9hDsx_140uIG)R&;5o!vI!bwkFREt0myrLNR55(wRS8^5|HPSdzr_%L^(KDoX)tM6DiR#s|`X}
z*V^A5B7eIyr0Vk-A~|1+Xdk7nvdZ;-NZ4nBh55D71jGwqnSOW%A~-7@FkHAN4|2$?
zbi_@~9^*vpo}e-sQ8YLzcEl9AnN5Q)#Ih5u>|Sa$X<@#_Kev6Hqa244qtG6*)buG=LIko%;Acq#_xGWzlgy|M*;*>q^dnFxogS$ignY1j<=JxzwSN14ms=6U3Dav8B<>ObMldo(_pZF
zWa#G;<7Y+PJ6uC=mq1pneYmkjpE%3_&i$G9R_o|EQ7O}iAK95cbe%qu93Hh)5un5I
zYQv|;OhA1
z53{L7qs!IO%BSCh%T5ovubfwT8vo`|EQ0^y
z+S;)8!!z+dmfdLDuHcb5*hZOf5*%54p&I_%M(R>>-uoJgx*ufrn#iMG|*8OoK_Bz8tH(?CR0&A?7{~(@j4QdOq~;fCT+~rn;{K9h<{HZn<1`
zXl4uhtt2MrZpkVrUrjVBI`m@en6*nlx1mwuAXQ`UuozG
zq;dx?l~T2^Y1Pv=ed#*(`AN$v-uof**nR08O(~i_zUfn>Y6}QWOJHlO97HWg&firR
zAEn!YwK$Ujg>Dj_wxVI8CnLXps7GYm;bYbqe_w>hKdC9}3n;g=6I=^5(S~cdq|xbV
zM7vwB2hesotKk7RRw^&qi?eXj={vVeguSQos>RE}tMX|d{?haYEV-XlI{aEx!gSZ*
z*2duTuDd$S#YkFdw0Q9-Ln={Wq5J<+nM|-Am}xc`3)c=>w5i&ulSW!5|A=2q77+#-
zGB6R@_qt}MyS^qT*b(nwjc%XX&OTOBpevx`T$2$B4M#GH^;m2}PeUMCaR&`WZJv#nTcLI;5*}k7!8vySxmS*v2qjhmnlbLE}BfiB96sI=q+s$OERx$
zMMK9xD$cD8ck{~{Tu)TT4>P6w=*tDOxWz30A>Tg}I;;Liuh6u0|9zFnS(d@ByR2F}
zs5lJ`%|@sh*A6IgU|i7)EqmD=jc<7_EUyR9*D=(vi98&i0N%L097s>n4}94ac{=Rx
z;xiC^R}|P^n6+=VeMwVkz(wJGy0hh4*zSMAwl5R`B-9rg0mR9OU6jcv*om8{it%GN
z5$ho8vu}Jozr7&77Q|+ly>(Xo9&R~rp4*99l)?AmwlzKIK6y|h)iN9
zu`LIt;aPSnci0}hLVF*E`kL{?Egw&h>*79_}q0#=K6TO|DoGSLtjKmSJa;@zFkueOzNk9tAcEyid
zHHuu;s^XXN%uDJQ9+=5(B{)QFCW39O8WT&o7)nTWCwL6{RC=p!lFyF0$R^LreB)P0~-J&3XyOL
z0-R49(k#x%RpX|3{Sr8OVT!?7PT3=c`RTPiwa3D-U!2+{099Bh6oPRFKf5<(<3jlJ
zTQfCI07k;b3M_kj4e4ofu`>HD`AjJx;#8TIW5_c5bR1i(n@vldRm$D619yLEYMAO|
zifMWz*$k|F%?7``em?>omssw2HVKsF0DznE#&*dgKS{9AR4)|UK0J1>Yqz=#7j$&Et_?|Y5rH{LEcd{VozOKr;x-K~NC-9N5?P9&1^yuSL7P^CTJE>i+
zv*;kGp%@LGC>#u2loRqB;#g_9#1Gd&V1)<-wqUmO?_p4jM)d}@u!wtS>RPjkAnys)
zspFuOE248#bVx@zDGl>;swNMirVw&jt~7sz7wK_;S5qX;7cLT|uSN?4E2rq@*1~Xc
z20Z@}PulXG5!+CbGMmmrX7R0BHZ`n>0PF0&9C{zBJ~Y8U-@>&%u@40hfSGn`AJqcN
zHh0w{D|0AVw0@jsj~?Y^M{FK(M!7i*jvjJEkbt^9nSzZNkla(oLq6(Kw|2q29o(We
zY+f`An@HPsdF1^@g(`2SZzO9$s+gU$B;
zXCxdSZqkAPls7N!H2b85UlXkMv!9~HKV17ZS1eB$E-8R-?T)GMeTze&s{f|Q!Fckp
zM<_opu}Je)@X&s^%a(mqaDBd6+etJV{21VEHyWp>v~IhddkH0f5EuFn+h)5yW!uP~0D?MIO`pYgEb8aEX~O$xl+
zt^yZ3^zS!c)x>#pL9yJr)w~leu?A#U!53$PK|n+{Se)@3hJ@twMO!Q9-duf9AhnzN
zRhA2=G)k57)6`mbY6;>4K#C?1iuKWaDSn6U7`k^h+HlCbQZgP>|d
z^AtW$t)#)erIY7DEFS&vXuzj{fsuw)Lc%RnQR(=!5()9Z+a*V4_fNyFpTATm-AsRqDRmSMdiC)TU3y%t{rNtx%T|QE
z+n0J=dK(%yr8vn%Kn~om=4{W-Iv3(~UJP~{n#*7lW5kn9NHV911qoILk+%-xQT`3D
zcVfGoTbx||mn2k1`^TpoMUQa{51}i?4c^;^w*no`lmOxcZ
zSS#LMBYNm|szq_TA{{4(cBhSiw%JVGM6~U$_osP6K}w7!=RPtHovn7oTS4MzKEe3t
z&ypxbL^Z&rv~XY{*?q)>6##A?zuSO4?U&=U*dJ3hWY!J(ddI{a
z*P%NOA!_`FlR+w;ijMd(Xzl^%4>ZVfZd=3=0vF7ef3T{>FkZW1^d*t6W#5D-HD>T5
zH1xY4lZL8bKS|snj0fAUAs-AX*u#@M-`Mk_XZ{pyKq=$5WngVi_p9FM=}_6K&QcNE
z1&EVBW9=l7pz>~^a;Jchkf5?KWpX=ZqH^`U=NTD3w-%=k2iVVP0#x})7cIshuCR&j
z{HXf<0jaBaRpdsmB2d+t6|jcPNx)6Q*k!m5)L}u_XDi%!tIsg
zLxM|B*3^W5V|JyKEenE30}PG;4}QjaXWVoeDptDu#gTTKi#7w7lB&Xf7@dq09VbkT
zVoV>{unAfTobhML!(#S-AO@4#i+zvs1#g}W<}`TMamk~lB!_3(h)dlyme<`#;XSRtolDk0Bh;sY-4O|KO3h|5IW
zKRj{2_E1dB!2wQu(Igo5w9daqc9=Q&^55;DS8O5z!e6@Sbc7l|QQX<-$iKL=Zg?s;cE}7|gZGP3h4Z|#is3V`@bGH9
zSrn#~(j_+X7!~rO+3Rv6p9p3;8%qRcaOBrB@19YK*FXtOW~*s0%U+5%c;34`?%F(h&&pj7n?z${6kK1|KM}Z7
z0Q1{8)jp+0=IQB6qly_aONI~9o)7P=RtEB$_33*mjc(j(hJ2CVnf2m3S(u5aWVd^+;IGBJJ&8k?4kaNvSCnDoqhff}1UqgH-I4{E!kB9P3A6MV+u`gs;b`EJB
zeMsN?TvhX5?40gDz@>{>e`GM5Z3fsUcXWHj6N%56>4_33?t~qfX3mlij
zLOvaw6y~9BJh(*aBgB#HiI19)+kRhkkWRnv6Bor&Z%@=yrGUN63(4lZ0DhTWa+<27
z1i5#kU#a1#e6hs%zO+~=5hfus875{Vj(JAAY;oYV54z@lUnp$P?ZS(Ol6mxOquTK*
zD*A;{L6}}!&d^S>K%nbYLl$UOBGUJISu9qgE=|J`Jn}^!`#b_Cu=}7yjk(5$S9`I2
z;`KU1J1p11Z|K?ek*CMvnm>sr-}KiYV2DJr5nS;3UNvf&F=T?Wx)DR33HE3C=7(QC
zuE3#pe>_=93TVs(imIhn8mzR`;U3DOoGfxiQ@q||9UZj;A|##qHx3cR*FKHRqLpX*
zoX^g8@~P#)SX7Z-{BlCAE<}mwb#0X|o8)$)&ImzDtclnKo+oE6;|!yrlHSg}CF&v9
z!39T2`){_U6f5mmqA#V==Kxl4^Mc*fwB-8S?T#)9Q*8SilTyG0OEn~^Ylol4A44u}
z{%74mS2U4BL@sXWu{Zk<#)=wS
zbQ5&P3!bz4luM?0iHdJEiFRj9KRT$@>h_Iu+Z6i8T{>Dq7Zwg#EEm}~$;xqo77fN^
zXG{9{mr<$LJS}PNTumP4`#)Ph$}Kjwt?zL)+1D{`1*EC$Al#{;MxNgJ4>>_b$&1P;2<@E;p~#4`rl-uVnE7gkL%N@}jQ3n5~z
zw%_)_&lPj{wTaMOgBq3g7qrnhyFsR4sLqZ6C;PhKZ3EqgI2&o;DrcY>`up0pKJgCr
zxOHlUZt3CEzomWRB>?
z@r#tSWA99;3k>Y^V@%_P=BPmiyb8*3f6Y+1;qo%
zVT_UE8XA>`55aCz33)me90POJZ)-k|_E9C&wwj$%CGS~n-V-qb*2ymy(=ek{CYgX3opQ#UB4E7?R3Ecaw
z{mQY$r)1wWLvlPbcq^gh+4Lrxrku-~YHbLJX-EhyXYEUd+U>rJQ@
zh{WvT`m@5f+cvh(*dZwL#mv$8%M^lUQ>SHPGW{z!dnmf)MeiVjb)piimKlyC(PDyrmwX`L2Bn?=eo|6!O#X
zaE5J~oPIy)KDG}Ti{b)Bd%0O4nU6QbPGnozP{Tk;B(2KHTS#T0b+l<$sWPLGMSyL@gO>oLNqClCV@Ah)g
zZ_;s+^M44#G$C={)b6R2*7iV3!6S)Jbx};gZFRjTb!Rd9ko5Gr#UkqW#1PaCfJfmZ
ztjyMrb=$T5p*hseiV*sEag_UfK-S!E{)W8GmvRqxU!3+iorrvYN5Di+2GlqI+x$W?
z7gI{y`qTjoGo)O{w$56|sw(4u$%O|!
zEmlxDi3f!lwn74(I$L8Qc?5r$7(;o}zaYp)%KCQ6OvMu%!E!E)KtyL-6N;GvtgeT2DBLCa#wNC8NQZNUosNKz?$KW&61zY99SF4d&i
z;@7*EO1!C>ra4zjsIb`VqS=JSA^fvMQRt3Xo#*9~y0lil3{{HE{S-Wud$ce6x_mC6
zOk|s>@h+nA^`R+*eo_fMWyBYlD@LK$PL{Iv!x-xiNgAyQ1ew)&i!ZynX7J>RYo!^4
zPrQ6`K<1KPZi3VwJ93Cs^JHzc8*a6LjZ~+f`!n{Q&hkd|r$d5#k8W?hn!I#9DFbwz
z0;evyca?+y=dJ^%$NL5i;|w#u4hjcY`zGY{%3$53XOIRL8lh=N0Ox5n^`<#5b&~*M
zJ8hLDCi@ahZqNXCSG|VRHOL0bV6+2{IcZ+~(y5QNj5!xwV<
z7IFN6zFwWPrP8n-9BB-jX@JE4|N70`nj+Q72lZat@&lI6P{GbJ?5xH}wzz6mKaycuY-SzUpp
zgrr8t^tASO6`d$adx{k?^gv2<+U{mjbIlwk}F}?RAw~k|`edWIO_gk;QQx
zG3bJ1n+^q1YFBFnxMPl$YMu?fxzj6Bq15v{%Q!DI&_IUA(dccLQQR?x2j&J@Z@{eK
z{gsSTr{9+tqpVm1eg2i6deRmaBT-pTnLwskE?1LjqF{s3&E^!;ghcE1bm-I}%vURN
z8_$2YuR3#j$v-2w5K|ocw$atQuH^^~Rz={%3+nK^HtjWJ>P*%^<|QP->&jY*@2;4x
zYJ1wr-Ev4f-vT0M3q2vjc`YK)sG|Qp=l_f5hVCiL0B3A@Q3}$n{+yEIHKTDhebu#t
z#rfT@21Wx_lKx8jc*ty`+Q9Ggr}FWNeMjYA+YdF1jXZ{lE+s5!;hpC3jCs>hLgZV+
z1A1x9qg7&Q%tSmjRDQW9I=L_a#r^2sG3t>MBpV40g^0ziai}Ke=OuRUsaW$2LXm5I
zMQe{@1SavY&(ZIEzB+(Xk0f7MYJw|=NpBCL&u6Hs7gW?GmM}5bQ;R0yi5kk3a?8~`
zDbfw>Fm$^kyD0|$k=48~A1w_7IZ%-@YSAkq%Xd-tdJJzdvUGb53t`}($X*;F(y5BH
zz{RaLz;QG8mpVA*cXR7}vS|PMM>=mrE=I%CH@YZ4XW-ZOxK<~Wl_pD;*uSkaD~ACZ
zgIWSY2~{P=hx(6WqOXT#ak1{Yp?0KyMy+>AI+Vm2Qp{T%uSAm?bZy{w%}jWlYCAr|
z8Nl)QNMdcmtb6mRs
z-8kd!#i&!d#Et83@o7|j1%XsTe#_E7X`;ja$h>26&*h6Y;$~YIsT`uKQkMx;i2{9tb5^@qS
z^gJH^v~|?+Riyz8uxhr(#s2r;`TtVhfBDbG|N1f;h8_@adigyhVsPNrnib#SM7R4R
z0c#&r+!~a?O}V3wHB7a|VH<){I}3o2KH)8vZpX6JN{dlQd~p=+s|mET!Szws^V
zWu`ik8Pqb>DKjKRKdbFBIHxCk=#$jp!QGS;fehX5u|%-?9?GAA!F2s-)B|;#4huOZ
zOj)9s75LfWK4}y(-$;iQwKa%i601CFKKzU$U&)MvG1SM_((-0sR7~U
zzposC_X=d$;w_XY$!|#((QCFMVQ2jnzCE?ZeEB?
zK`t74>xZ~gkHnLz8*iuL@SNvC@y~>9@IN#xFB5s(erh=V$B(#V9$`b+`@t*L$b_nd
z-xkBMX|NfdoRJVo)#56i%XfYE_affkxP^NQVF?6bRW5e8U5FCkdTVmy;hzdY<
zwXpozBfE7F+uPCCZ#x`Y)>dCsGlfwXZ4fH6coC5W$QlK>0qX!U5CN9QBW6dr>N*}x
z%`rVb!DOgX!QkX9$jv>D%_h-?$5B_);4AE-_$PAX{7+8B4;!-uu$$r$jA;d{q(@J=
zMRlx#=y}(h8MO?BavhnGY}uXNyW-`AhGng#!|Zv8_(tJ}GD19;$`6@#_L*Q?y~ajL
z&;={ib%(J)BXkW6ohA+q5B_%F=b|{@RN6TH$>U>=Qk}I5rq>tzu!%4^RYqpgPhPzwovr4tq;Zv
zLmpU4P~QiUt{8nvbTe6LbAP)g`a7VRg}@IwHaq-9bAuDJs-yU-2Z|g@U@R1n_he4z
zd|I?KI=%(7L9_KthsQ+WD>8Nly&yH`@kQkVSd$~^&vY8#KJAV1j{GuyfcB)QyGbng
zbRx*u+MVA^3p%k)Gw_d3DD`y~2#rt9nJL}cr7K2Y$q)9h(qJPy|Khy(CBU4aaJ!ZA
z9OL9w=;^zTOfQ9U|4udk@{4RSk^M87{_Eq!)W6NuEF}N?7*c(Gp359qOLhj_6#9hQtTqFBtKHYhf&;RIi{BaZP8DP9Kw7tZ&}Q2Ogz#{Ofho
z5YKRrPPT;U+mML1HO|9zoik|Lz_i&uQ5M!l|F)O52r)UoaugcU=Yp-uH}?`<%f}e)aV&J;afP?Lo8qs#7NuAupQn45M6IPF;^v*{
z|CFn6iykuwer}rjXvDU_ujcgBPhB~ge8`+x)dZ}=WEIWokF?0FRV!-yHuApb@g~mb
zd3(;$KSx1e_f&8(yo0wYfS(d@=cpHKD1-Rb1AV*ed8p1E`ZS8jGa;^R%#6qj&`?5dMFOj-iOJx`5d;EN>JK%6LBt&Ho3EHT@%Zp*9
z@nE$%Wf6M6MmOHRW5!^$vUKO?$y^LRL$S>z9?=>&%<9F@w8u&tP)sG$THf#LPY*Py
zOf3B?ZS%$V?j5V1j{4{?+oE^*MI-Nn7=k;rn7{-)4w8B5I$zf#lfmZUl%gtSURE0Iu+Kkt|tf^cb@kzdW5ZJXYb?
za3*uDoKCL2-mZNC6A#-S#Si{2WFi1}Cu&to8^l~SRqNg*!b12@M)a>>CN
zuM7t+-d#K(axLth2)nx_A8Ln6ec@~=@L>C1Ui__6R}}`>aAjha|7)snMnG_jE(zFoY=lNyEHb_(C(8gSMkxq&qJzg{Zd1pM
z;=}=i+TrCfj&fZU+fGnbxtpM{Z;DPY83_u^A$8{Cgb*DJU6Q#hRXuUohBsd!L_`axbB2SqVU&FUp
zZme%yzBY=sgd<-zO@+Lgo(|kM>)Hu188TP4m3*QIa@f|vJd@pLZz4c571xzCxWVS)KE1_BEj)%_X^(
z$MMcw+II!^l}Pvbuc=*OlLWnN<~V{x&ET|=FL}pAo|`Cur-rJoH!?HJ^I@NBRZ4@O
zGbT_kW)jG$#`_n5JGeY7xltBZ(blKUn<_US92_As1?&k-#-DQ?=~$px0*^j`5APD<
z9FT+Wrw{10SceB9h!NWnpXi5UHOwvihT46n{)wTu&+al(G{irxYu6IACrP<4?=I)0Q2X
z(jW9*3Z!0&WMrv7_YlOo@PUFpjg^jX+%BA)l-POxE@f36$TCMAo0lP~>ub@4=+Cu2
z1$}baTTt@j@0Orvs4kx1+6h7zO#2+Nd!x|Eu;MP=Gzsc>njln8HRqg4+SAaJ=M
z&);;JGw#*A;a_f{^Z&0L@D2(c_R!Ln0$y#y?9mKQwmgCyku&?my6HPTtlyH?m$9B~
zm6SpE3q_Z99vDR5l@2W?27-C}!?*rUZV#C(csld?QFzzK9U_>J7Na=?2*p;EOxJjjTDtfVWb_qE
zi`^fr1SnFAoB_XJ3MJ^M^I%6>DvC8BS3EGYfmgCx{xq#laC
z7tLjS8&%XB}FS{DN*?QtJb7Y
zGC{WFJSA@|DaJNbl(g5_R}n+ronsNAS#iTlUDN4}rr&%brrtn;LKO8Ecv)928G%0L
z5b%F2orPDF;nu|!X%HB?VTNv`8-bx4k(QS3M!JXY?vn17X6QzwySt^sZ|-;RpYX1A
z)_cx#_CEVJ;;^-Pwy#g2mI%=@5HL7A@#%82;p}Z+LsBNE%UvN>=M5b`(4h8CmFZW@
zUx6j$47>;lk48q;HZ$k8UWFgvt-nh6fL(ZZR1`mA%-v)4k^%epQ?QHUB=a<{2DZSa
zo|X6a1%0@?#ikOhdnZY87c~&fZ_p~Rx8U$a5;Ut)&jtM>w%B}i-p5Xoe??isVc6aib_!8o2&S0S|QAQ&z4el})O+y9sA?MN^+rHq@y*?JuE|XL^
za?GB-G`zVGevXJLm-35e#(ONf-roJk#EQaLU|-vICJtjQRXOMbi}s6NUtNboKH+Nc
z`gWfvv(&6xF-X*n7q{@&SWJ7wN_^3-1UXyHLryq%n@H9%D5%2_6xvDa`#aAmq!=&|
z{(b6YTLvb|DrYxy{=4vb^L_N0nn%h)$i4B5pMWft>KrVaDacySQ~&(9!`NUrSzpC*
zWQPXOPwAw4uFEe+grSHW6}cBXKorvDPcy&wdLu7#dd%(8KU8JpzFZgnY(r3rMKVhy
zaEJwuX3<4P?L^(O~b!?-Sq}G88(a*Kp
zkcqkWyuF{gx7Sys3gVu5
zSEe2ju!X!U_bDZ%2kHooA$ZY^O_o#cN&*O3LB_Sq?
z&PZ_Ah;O`DDAm29(gs=xAz&KI@pM7M+gv~mTla8UNEAKL%Q0jJ68;S@lDnGO@RjiU
z>f9+kqBUgmSW?rWGsC-Rb9CsuH4z(QVrTST?)qy#o`L_|9+)c%zV1~8?OeP4-O&h$
zORKQd_9JvJ+~@6)^lECO0+GZFGVOs!*7*Spkp@HzzNwiVkksDDPzZ_O)3m7)|L~3H
z6Y5ZjETEQ;LK=aWwzFcq%RZ92k3$l~$nB}J#viBe`iS@e5DMxoCUXkGLXS0oH$O<;
z$|(*aY@`6o+hei4F9+XtotVNP3vDSJfS;ds9zt2xJxTDIkpPcJ@2Y!Svd8c5deT>ViECT31Z<(
zOU3jPb4L35BI>Ak=sKXT?;H<4?}zc!AT)`Bb{2WyK+jL35re6Fx=y{J!*z%{@wxL+
zqNhRu>+y!)9e)8}%<%#9oR@*Z{}hqs|B8qnH=^Ew(ilCI&tgx)6pIj7ijNsrT&z(t
z#Z28*cIE)`wSeXg-577oB;TE*jsTz`W%hVAXEhjuTk|bca
Use Cases
@@ -292,21 +364,9 @@ const HomePage = ({
A new way to use the internet
-
-
- Crypto without volatility
-
-
- A fairer financial system
-
-
- Innovative apps
-
-
- The network of networks
-
-
+ {bentoBoxes.map((box) => (
+