Merge branch 'dev' into fade-icons-find-wallet

Author: corwintines

.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,92 @@
       "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"
+      ]
+    },
+    {
+      "login": "hughcrt",
+      "name": "Hugh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/24587702?v=4",
+      "profile": "http://hugh.sh",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "z3zzz",
+      "name": "Kim Kwangtae",
+      "avatar_url": "https://avatars.githubusercontent.com/u/91174156?v=4",
+      "profile": "https://github.com/z3zzz",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "tobi4021",
+      "name": "tobi4021",
+      "avatar_url": "https://avatars.githubusercontent.com/u/84390698?v=4",
+      "profile": "https://github.com/tobi4021",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "lonelyotter",
+      "name": "Haochen Song",
+      "avatar_url": "https://avatars.githubusercontent.com/u/57280827?v=4",
+      "profile": "https://github.com/lonelyotter",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
+    },
+    {
+      "login": "opensourcex123",
+      "name": "N Fx",
+      "avatar_url": "https://avatars.githubusercontent.com/u/73230562?v=4",
+      "profile": "https://github.com/opensourcex123",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
+    },
+    {
+      "login": "srhinee",
+      "name": "samsara",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29331203?v=4",
+      "profile": "https://github.com/srhinee",
+      "contributions": [
+        "doc",
+        "bug",
+        "translation"
+      ]
+    },
+    {
+      "login": "greefea",
+      "name": "greefea",
+      "avatar_url": "https://avatars.githubusercontent.com/u/106492500?v=4",
+      "profile": "https://github.com/greefea",
+      "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,17 @@ 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>
+    <td align="center"><a href="http://hugh.sh"><img src="https://avatars.githubusercontent.com/u/24587702?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hugh</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=hughcrt" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/z3zzz"><img src="https://avatars.githubusercontent.com/u/91174156?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kim Kwangtae</b></sub></a><br /><a href="#content-z3zzz" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/tobi4021"><img src="https://avatars.githubusercontent.com/u/84390698?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tobi4021</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=tobi4021" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/lonelyotter"><img src="https://avatars.githubusercontent.com/u/57280827?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Haochen Song</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=lonelyotter" title="Documentation">📖</a> <a href="#translation-lonelyotter" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/opensourcex123"><img src="https://avatars.githubusercontent.com/u/73230562?v=4?s=100" width="100px;" alt=""/><br /><sub><b>N Fx</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=opensourcex123" title="Documentation">📖</a> <a href="#translation-opensourcex123" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/srhinee"><img src="https://avatars.githubusercontent.com/u/29331203?v=4?s=100" width="100px;" alt=""/><br /><sub><b>samsara</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=srhinee" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Asrhinee" title="Bug reports">🐛</a> <a href="#translation-srhinee" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/greefea"><img src="https://avatars.githubusercontent.com/u/106492500?v=4?s=100" width="100px;" alt=""/><br /><sub><b>greefea</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=greefea" title="Documentation">📖</a></td>
   </tr>
 </table>
 

docs/chakra-migration-guide.md

@@ -0,0 +1,60 @@
+# Chakra migration guide
+
+This is a reference for migrating our current `styled` components from `emotion` to [Chakra](https://chakra-ui.com/) components.
+
+This is part of our [UI library implementation epic](https://github.com/ethereum/ethereum-org-website/issues/6374).
+
+## Replace styled components with Chakra components
+
+All `styled` components need to be removed and replaced with the corresponded Chakra component. [See the list of components](https://chakra-ui.com/docs/components).
+
+## Override styles using style props
+
+- You can see how to use the different style props here: [https://chakra-ui.com/docs/styled-system/style-props](https://chakra-ui.com/docs/styled-system/style-props#margin-and-padding)
+- Chakra default values are documented here: [https://chakra-ui.com/docs/styled-system/theme](https://chakra-ui.com/docs/styled-system/theme)
+
+```tsx
+// before
+const Paragraph = styled.p`
+  font-size: 1rem;
+  margin: 1rem;
+`
+
+// now
+<Text fontSize="md" margin={4} />
+```
+
+## Theme colors
+
+All the previous colors defined in the old theme `src/theme.ts` were ported into the new theme as well. Use the same color variables.
+
+```tsx
+// before
+const Text = styled.p`
+	color: ${({ theme }) => theme.colors.primary};
+	background-color: ${({ theme }) => theme.colors.background};
+`
+
+// now
+<Text color="primary" bg="background" />
+```
+
+<aside>
+💡 In the **next iteration** we will refactor all the colors with the correct color from the new Design System
+</aside>
+
+## Update dependencies
+
+- [Deprecated] `src/components/Icon` - use the [Chakra Icon](https://chakra-ui.com/docs/components/icon/usage) instead.
+
+```tsx
+import { Icon } from "@chakra-ui/react"
+import { BsQuestionSquareFill } from "react-icons/bs"
+;<Icon as={BsQuestionSquareFill} />
+```
+
+- [Deprecated]`src/components/SharedStyledComponents` - we are not using this anymore, use Chakra components instead.
+
+## Do you have any other question?
+
+Ping us in Discord, in the `#ui-library-migration` channel, or leave a comment here or in your opened PR, and we can help you out 💪

docs/typescript.md

@@ -9,6 +9,24 @@ When we reach the moment where the entire codebase is in TS, we will enable `noI
 
 This is just starting, any suggestion is always welcomed and appreciated.
 
+## Declaring types for variables
+
+When declaring types for variables, you should only declare a type when it isn't obvious and the type can't be inferred.
+
+```
+// Do not use
+const someVar: string = 'string'
+
+// Use
+const someVar = 'string'
+```
+
+Do declare a type for an unassigned variable when a type can not be inferred.
+
+```
+const someVar: string
+```
+
 ## Migration guide & contribution opportunity 🎉
 
 We'd love your help in migrating our codebase!

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.1.2",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",
@@ -30,12 +30,12 @@
     "framer-motion": "^6.5.1",
     "gatsby": "^4.15.0",
     "gatsby-plugin-emotion": "^7.19.0",
-    "gatsby-plugin-gatsby-cloud": "^4.3.0",
+    "gatsby-plugin-gatsby-cloud": "^4.20.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-manifest": "^4.10.1",
     "gatsby-plugin-matomo": "^0.9.0",
     "gatsby-plugin-mdx": "^2.14.1",
-    "gatsby-plugin-netlify": "^3.14.0",
+    "gatsby-plugin-netlify": "^5.0.1",
     "gatsby-plugin-react-helmet": "^5.0.0",
     "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
     "gatsby-plugin-react-svg": "^3.1.0",

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

@@ -1,5 +1,34 @@
 export type Colors = typeof colors
 
-const colors = {}
+const colors = {
+  grey: {
+    100: "#f7f7f7",
+    300: "#d4d4d4",
+    500: "#646464",
+    700: "#222222",
+    900: "#141414",
+  },
+  blue: {
+    100: "#e8e8ff",
+    300: "#8d8dff",
+    500: "#1c1cff",
+    700: "#0b0b66",
+  },
+  orange: {
+    100: "#ffe3d3",
+    300: "#ffb991",
+    500: "#ff7324",
+    800: "#451900",
+  },
+  red: {
+    600: "#b80000",
+  },
+  green: {
+    500: "#109e62",
+  },
+  yellow: {
+    200: "#fff8df",
+  },
+}
 
 export default colors

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

@@ -0,0 +1,47 @@
+import {
+  lightTheme as oldLightTheme,
+  darkTheme as oldDarkTheme,
+} from "../../theme"
+
+const oldLightThemeColors = oldLightTheme.colors
+const oldDarkThemeColors = oldDarkTheme.colors
+
+// define each of the old colors as a `semanticToken`:
+// `name: { _light: lightColor, _dark: darkColor }`
+const oldColors = Object.keys(oldLightThemeColors).reduce((colors, color) => {
+  const lightColor = oldLightThemeColors[color]
+  const darkColor = oldDarkThemeColors[color]
+
+  if (typeof lightColor !== "string" || typeof darkColor !== "string") {
+    return colors
+  }
+
+  return {
+    ...colors,
+    [color]: { _light: lightColor, _dark: darkColor },
+  }
+}, {})
+
+const semanticTokens = {
+  colors: {
+    // define old colors from the old theme as semanticTokens to transition
+    // from emotion components to chakra
+    // TODO: remove these colors as we migrate away from them
+    ...oldColors,
+
+    // Design System colors
+    primary: { _light: "blue.500", _dark: "orange.500" },
+    primaryDark: { _light: "blue.700", _dark: "orange.800" },
+    primaryHover: { _light: "blue.300", _dark: "orange.300" },
+    primaryLight: { _light: "blue.100", _dark: "orange.100" },
+    body: { _light: "grey.700", _dark: "grey.100" },
+    bodyLight: { _light: "grey.500", _dark: "grey.100" },
+    disabled: { _light: "grey.300", _dark: "grey.500" },
+    background: { _light: "white", _dark: "grey.700" },
+    success: "green.500",
+    error: "red.600",
+    attention: "yellow.200",
+  },
+}
+
+export default semanticTokens

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

@@ -10,6 +10,8 @@ import styles from "./styles"
 // Foundational style overrides
 import foundations from "./foundations"
 
+import semanticTokens from "./semanticTokens"
+
 const config: ThemeConfig = {
   cssVarPrefix: "eth",
   initialColorMode: "light",
@@ -20,6 +22,7 @@ const theme: ThemeOverride = {
   config,
   styles,
   ...foundations,
+  semanticTokens,
 }
 
 export default extendTheme(theme)

src/components/AssetDownload.tsx

@@ -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} />