Merge pull request #7407 from ethereum/dev

Deploy v5.0.0

.all-contributorsrc

@@ -7767,7 +7767,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/98348072?v=4",
       "profile": "https://www.linkedin.com/in/lcalixxto/",
       "contributions": [
-        "doc"
+        "doc",
+        "content"
       ]
     },
     {
@@ -8288,7 +8289,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/39565075?v=4",
       "profile": "http://www.samuelakinosho.com",
       "contributions": [
-        "doc"
+        "doc",
+        "code"
       ]
     },
     {
@@ -8374,6 +8376,25 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "Aldizh",
+      "name": "Aldi Zhupani",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2282120?v=4",
+      "profile": "http://aldizh.github.io/",
+      "contributions": [
+        "bug",
+        "code"
+      ]
+    },
+    {
+      "login": "linhuatan",
+      "name": "linhuatan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/94831627?v=4",
+      "profile": "https://github.com/linhuatan",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1252,7 +1252,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://www.youtube.com/c/Cryptoversidad"><img src="https://avatars.githubusercontent.com/u/107050863?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Cryptoversidad</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=cryptoversidad" title="Documentation">📖</a></td>
     <td align="center"><a href="https://disconnect3d.pl/"><img src="https://avatars.githubusercontent.com/u/10009354?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Disconnect3d</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=disconnect3d" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Adisconnect3d" title="Bug reports">🐛</a></td>
     <td align="center"><a href="http://setharielgreen.com"><img src="https://avatars.githubusercontent.com/u/9850322?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Seth Ariel Green</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=setgree" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://www.linkedin.com/in/lcalixxto/"><img src="https://avatars.githubusercontent.com/u/98348072?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luisa Calixto</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=lcalixxto" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://www.linkedin.com/in/lcalixxto/"><img src="https://avatars.githubusercontent.com/u/98348072?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luisa Calixto</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=lcalixxto" title="Documentation">📖</a> <a href="#content-lcalixxto" title="Content">🖋</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/theanneli"><img src="https://avatars.githubusercontent.com/u/106612248?v=4?s=100" width="100px;" alt=""/><br /><sub><b>theanneli</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=theanneli" title="Documentation">📖</a></td>
@@ -1324,7 +1324,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/gorondan"><img src="https://avatars.githubusercontent.com/u/97026899?v=4?s=100" width="100px;" alt=""/><br /><sub><b>gorondan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=gorondan" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/pruthvirajjadhav1"><img src="https://avatars.githubusercontent.com/u/73253354?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pruthviraj Jadhav</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=pruthvirajjadhav1" title="Documentation">📖</a></td>
     <td align="center"><a href="https://gndx.io"><img src="https://avatars.githubusercontent.com/u/10554486?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Oscar Barajas Tavares</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=gndx" title="Documentation">📖</a></td>
-    <td align="center"><a href="http://www.samuelakinosho.com"><img src="https://avatars.githubusercontent.com/u/39565075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Samuel Akinosho</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=LucidSamuel" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://www.samuelakinosho.com"><img src="https://avatars.githubusercontent.com/u/39565075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Samuel Akinosho</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=LucidSamuel" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=LucidSamuel" title="Code">💻</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://odair.dev"><img src="https://avatars.githubusercontent.com/u/45074733?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Odair Augusto Trujillo Orozco</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=OdairTrujillo" title="Documentation">📖</a> <a href="#ideas-OdairTrujillo" title="Ideas, Planning, & Feedback">🤔</a></td>
@@ -1338,6 +1338,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <tr>
     <td align="center"><a href="https://github.com/rogueassasin1729"><img src="https://avatars.githubusercontent.com/u/92800000?v=4?s=100" width="100px;" alt=""/><br /><sub><b>rogueassasin1729</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=rogueassasin1729" title="Documentation">📖</a></td>
     <td align="center"><a href="https://pandapip1.com/"><img src="https://avatars.githubusercontent.com/u/45835846?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pandapip1</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Pandapip1" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://aldizh.github.io/"><img src="https://avatars.githubusercontent.com/u/2282120?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aldi Zhupani</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AAldizh" title="Bug reports">🐛</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=Aldizh" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/linhuatan"><img src="https://avatars.githubusercontent.com/u/94831627?v=4?s=100" width="100px;" alt=""/><br /><sub><b>linhuatan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=linhuatan" title="Documentation">📖</a></td>
   </tr>
 </table>
 

docs/best-practices.md

@@ -104,14 +104,14 @@ export default ComponentName
 ## Styling
 
 - `src/theme.ts` - Declares site color themes, breakpoints and other constants (try to utilize these colors first)
-- We use [styled-components](https://styled-components.com/)
+- We use [emotion](https://emotion.sh/)
 
   - Tagged template literals are used to style custom components
 
   ```tsx
-  // Example of styling syntax using styled-components
+  // Example of styling syntax using emotion
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const GenericButton = styled.div`
     width: 200px;
@@ -128,14 +128,12 @@ export default ComponentName
   // ie: <PrimaryButton>Text</PrimaryButton>
   ```
 
-  - Recommended VS Code Plugin: `vscode-styled-components` <br>To install: Open VS Code > `Ctrl+P` / `Cmd+P` > Run: <br>`ext install vscode-styled-components`
-
 - Values from `src/theme.ts` are automatically passed as a prop object to styled components
 
   ```tsx
   // Example of theme.ts usage
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const Container = styled.div`
     background: ${(props) => props.theme.colors.background};

gatsby-config.ts

@@ -185,7 +185,19 @@ const config: GatsbyConfig = {
       },
     },
     // CSS in JS
-    `gatsby-plugin-styled-components`,
+    {
+      resolve: `gatsby-plugin-emotion`,
+      options: {
+        labelFormat: "[filename]--[local]",
+      },
+    },
+    {
+      resolve: "@chakra-ui/gatsby-plugin",
+      options: {
+        resetCSS: false,
+        isUsingColorMode: true,
+      },
+    },
     // Source assets
     {
       resolve: `gatsby-source-filesystem`,

gatsby-node.ts

@@ -435,14 +435,11 @@ export const onPostBootstrap: GatsbyNode["onPostBootstrap"] = ({ actions }) => {
 }
 
 export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] =
-  ({ actions, schema }) => {
+  ({ actions }) => {
     const { createTypes } = actions
-    const { sdls, builders } = Schema
+    const { sdls } = Schema
 
-    createTypes([
-      ...Object.keys(sdls).map((sdlKey) => sdls[sdlKey]),
-      schema.buildObjectType(builders.WalletsCsv),
-    ])
+    createTypes([...Object.keys(sdls).map((sdlKey) => sdls[sdlKey])])
   }
 
 export const onPreBootstrap: GatsbyNode["onPreBootstrap"] = ({ reporter }) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "4.11.1",
+  "version": "5.0.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",
@@ -9,13 +9,16 @@
   "private": false,
   "dependencies": {
     "@apollo/client": "^3.3.13",
+    "@chakra-ui/gatsby-plugin": "^3.0.1",
+    "@chakra-ui/react": "^1.0.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
     "@formatjs/intl-numberformat": "^6.1.4",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",
     "axios": "^0.21.2",
-    "babel-plugin-styled-components": "^1.10.7",
     "browser-lang": "^0.1.0",
     "browserslist": "^4.21.0",
     "clipboard": "^2.0.6",
@@ -24,8 +27,9 @@
     "embla-carousel-react": "^6.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "focus-trap-react": "^8.11.2",
-    "framer-motion": "^4.1.3",
+    "framer-motion": "^6.5.1",
     "gatsby": "^4.15.0",
+    "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-gatsby-cloud": "^4.3.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-manifest": "^4.10.1",
@@ -37,7 +41,6 @@
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-sharp": "^4.10.0",
     "gatsby-plugin-sitemap": "^5.0.0",
-    "gatsby-plugin-styled-components": "^5.0.0",
     "gatsby-remark-autolink-headers": "^5.0.0",
     "gatsby-remark-copy-linked-files": "^5.0.0",
     "gatsby-remark-images": "^6.0.0",
@@ -67,7 +70,6 @@
     "react-intl": "^3.12.1",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
-    "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "unist-util-visit-parents": "^2.1.2"
   },
@@ -81,7 +83,6 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-instantsearch-dom": "^6.12.3",
-    "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
     "babel-preset-gatsby": "^2.14.0",
     "github-slugger": "^1.3.0",

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -0,0 +1,5 @@
+export type Colors = typeof colors
+
+const colors = {}
+
+export default colors

src/@chakra-ui/gatsby-plugin/foundations/index.ts

@@ -0,0 +1,7 @@
+import colors from "./colors"
+
+const foundations = {
+  colors,
+}
+
+export default foundations

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -0,0 +1,22 @@
+const styles = {
+  global: (_props) => ({
+    /**
+     * Current scenario: we have 2 places where global styles are defined.
+     * - Our legacy global styles under `src/components/GlobalStyle.ts`
+     * - Chakra also defines its own global styles. Check them here:
+     *  https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts
+     *
+     * Having those 2 global styles creates some style conflicts. Here we
+     * override some of the default Chakra globals in order to keep the same
+     * styles as we had in the legacy one.
+     *
+     * TODO: remove these overrides as we adopt the new Design System and we
+     * don't need the global styles anymore
+     */
+    body: {
+      lineHeight: "1.6rem",
+    },
+  }),
+}
+
+export default styles

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -0,0 +1,25 @@
+import {
+  extendTheme,
+  type ThemeConfig,
+  type ThemeOverride,
+} from "@chakra-ui/react"
+
+// Global style overrides
+import styles from "./styles"
+
+// Foundational style overrides
+import foundations from "./foundations"
+
+const config: ThemeConfig = {
+  cssVarPrefix: "eth",
+  initialColorMode: "light",
+  useSystemColorMode: true,
+}
+
+const theme: ThemeOverride = {
+  config,
+  styles,
+  ...foundations,
+}
+
+export default extendTheme(theme)

src/components/Accordion.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // TODO add motion animation
 // import { motion } from "framer-motion"
 import { FakeLink } from "./SharedStyledComponents"

src/components/ActionCard.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"

src/components/AdoptionChart.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 
 const Container = styled.div`
   display: flex;

src/components/AssetDownload.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image"
 
 import Translation from "../components/Translation"
@@ -105,7 +105,7 @@ const AssetDownload: React.FC<IProps> = ({
         {children && <ImageContainer>{children}</ImageContainer>}
         {!children && (
           <ImageContainer>
-            {!!Svg ? (
+            {Svg ? (
               <Svg alt={alt} />
             ) : (
               <Image image={getImage(image)} alt={alt} />

src/components/BannerGrid/index.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export const Banner = styled.div`
   width: 100%;

src/components/BannerNotification.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export interface IStyledBanner {
   shouldShow: boolean

src/components/BeaconChainActions.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import { translateMessageId } from "../utils/translations"

src/components/BoxGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 export interface IBoxItem {

src/components/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import Link from "./Link"

src/components/BugBountyCards.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { TranslationKey } from "../utils/translations"
 import ButtonLink from "./ButtonLink"
 

src/components/BugBountyPoints.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useState, useEffect } from "react"
-import { ThemeContext } from "styled-components"
+import { useTheme } from "@emotion/react"
 import { useStaticQuery, graphql } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import Emoji from "./Emoji"
@@ -103,8 +103,8 @@ const BugBountyPoints: React.FC<IProps> = () => {
     currentDAIPriceUSD: 1,
     hasError: false,
   })
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   useEffect(() => {
     axios

src/components/ButtonDropdown.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState, createRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 

src/components/ButtonLink.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { margin, MarginProps } from "styled-system"
 
 import { scrollIntoView } from "../utils/scrollIntoView"

src/components/CallToContribute.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Link from "./Link"
 import ButtonLink from "./ButtonLink"
 import Icon from "./Icon"