Merge pull request #7450 from ethereum/dev

Deploy v5.1.0

Author: wackerow

.all-contributorsrc

@@ -8395,6 +8395,53 @@
       "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"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1340,6 +1340,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <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>
   </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!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",

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/FindWallet/WalletFilterSidebar.tsx

@@ -350,7 +350,7 @@ const WalletFilterSidebar = ({
       ],
     },
     {
-      title: "Onboard / offboard",
+      title: "Buy crypto / Sell for fiat",
       open: true,
       items: [
         {

src/components/FindWallet/WalletPersonasSidebar.tsx

@@ -163,21 +163,22 @@ const IconContainer = styled.div`
 `
 
 const StyledIcon = styled(Icon)<{ selected: boolean }>`
-  width: 1.3rem;
-  height: 1.3rem;
+  border-radius: 100%;
+  width: 1rem;
+  height: 1rem;
   margin: 0 0.25rem;
   fill: ${(props) =>
-    props.selected === true ? props.theme.colors.white : "rgba(0, 0, 0, 0)"};
+    props.selected === true ? props.theme.colors.primary : "rgba(0, 0, 0, 0)"};
   background: ${(props) =>
     props.selected === true
       ? props.theme.colors.primary
       : props.theme.colors.priceCardBackground};
-  border-radius: 4px;
-  border: 1px solid
+  outline: 1.5px solid
     ${(props) =>
       props.selected === true
         ? props.theme.colors.primary
         : props.theme.colors.text};
+  outline-offset: 3px;
 `
 
 // Types
@@ -273,7 +274,7 @@ const filterLabels = {
     icon: <BuyCrypto />,
   },
   withdraw_crypto: {
-    label: "Withdraw crypto",
+    label: "Sell for fiat",
     icon: <WithdrawCrypto />,
   },
   multisig: {
@@ -289,7 +290,7 @@ const filterLabels = {
     icon: <ERC20Support />,
   },
   eip_1559_support: {
-    label: "EIP-1559 support",
+    label: "Fee optimization",
     icon: <Eip1559 />,
   },
 }
@@ -533,7 +534,7 @@ const WalletPersonasSidebar = ({
                 aria-label={`${persona.title} filter`}
               >
                 <StyledIcon
-                  name="check"
+                  name="circle"
                   selected={selectedPersona === idx}
                   size="2rem"
                 />