Merge pull request #10073 from ethereum/dev

deploy: v7.11.0

Author: corwintines

.storybook/manager.js

@@ -1,6 +1,12 @@
 import { addons } from "@storybook/addons"
 import theme from "./theme"
+import favicon from "../src/assets/favicon.png"
 
 addons.setConfig({
   theme,
 })
+
+const link = document.createElement("link")
+link.setAttribute("rel", "shortcut icon")
+link.setAttribute("href", favicon)
+document.head.appendChild(link)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.10.1",
+  "version": "7.11.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",
@@ -43,7 +43,7 @@
     "gatsby-plugin-react-i18next": "^3.0.1",
     "gatsby-plugin-react-svg": "^3.3.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
-    "gatsby-plugin-sharp": "^5.4.0",
+    "gatsby-plugin-sharp": "^5.8.1",
     "gatsby-plugin-sitemap": "^6.4.0",
     "gatsby-remark-autolink-headers": "^5.21.0",
     "gatsby-remark-copy-linked-files": "^5.21.0",
@@ -85,14 +85,14 @@
     "@chakra-ui/cli": "^2.3.0",
     "@chakra-ui/storybook-addon": "^4.0.12",
     "@netlify/functions": "^1.2.0",
-    "@storybook/addon-a11y": "^7.0.0-beta.51",
-    "@storybook/addon-actions": "^7.0.0-beta.51",
-    "@storybook/addon-essentials": "^7.0.0-beta.51",
-    "@storybook/addon-interactions": "^7.0.0-beta.51",
-    "@storybook/addon-links": "^7.0.0-beta.51",
-    "@storybook/react": "^7.0.0-beta.51",
-    "@storybook/react-webpack5": "^7.0.0-beta.51",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/addon-a11y": "^7.0.6",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
     "@types/browser-lang": "^0.1.0",
     "@types/github-slugger": "^1.3.0",
     "@types/luxon": "^2.3.2",
@@ -112,7 +112,7 @@
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "rimraf": "^4.1.1",
-    "storybook": "^7.0.0-beta.51",
+    "storybook": "^7.0.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.6.3",
     "walkdir": "^0.4.1"

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

@@ -1,13 +1,15 @@
 import colors from "./colors"
 import shadows from "./shadows"
 import typography from "./typography"
+import sizes from "./sizes"
 
 // Check the following link to see all the possible options:
 // https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/foundations/index.ts
 const foundations = {
   colors,
   shadows,
   ...typography,
+  sizes,
 }
 
 export default foundations

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

@@ -16,6 +16,8 @@ const shadows = {
     dark: "0 1px 1px hsla(0,0%,100%,.1)",
   },
   tableItemBoxHover: "0 0 1px var(--eth-colors-primary)",
+  gridYellowBoxShadow: "8px 8px 0px 0px var(--eth-colors-gridYellow)",
+  gridBlueBowShadow: "8px 8px 0px 0px var(--eth-colors-gridBlue)",
 
   // * Part of new DS
   // TODO: From current theme. Rename to 'buttonHover'

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

@@ -0,0 +1,9 @@
+const container = {
+  "2xl": "1440px",
+}
+
+const sizes = {
+  container,
+}
+
+export default sizes

src/assets/wallets/taho.png

@@ -1,21 +1,17 @@
+// Libraries
 import React from "react"
 import { GatsbyImage } from "gatsby-plugin-image"
-import {
-  Box,
-  Flex,
-  Container,
-  Img,
-  Center,
-  Heading,
-  Text,
-} from "@chakra-ui/react"
+import { Box, Flex, Img, Center, Heading, Text } from "@chakra-ui/react"
 
+// Components
 import Translation from "../components/Translation"
 import ButtonLink from "./ButtonLink"
 import Emoji from "./Emoji"
 import Link from "./Link"
 
+// Utils
 import { getImage, getSrc, ImageDataLike } from "../utils/image"
+import { trackCustomEvent } from "../utils/matomo"
 
 export interface IHide {
   shouldHide: boolean
@@ -125,7 +121,16 @@ const AssetDownload: React.FC<IProps> = ({
       </Box>
       <Box mt={4} p={0}>
         {!Svg && (
-          <ButtonLink to={downloadUrl}>
+          <ButtonLink
+            to={downloadUrl}
+            onClick={() => {
+              trackCustomEvent({
+                eventCategory: "asset download button",
+                eventAction: "click",
+                eventName: title,
+              })
+            }}
+          >
             <Translation id="page-assets-download-download" />
           </ButtonLink>
         )}

src/assets/wallets/tallyho.png

@@ -10,10 +10,13 @@ import {
 
 import Emoji from "./Emoji"
 
+import { MatomoEventOptions, trackCustomEvent } from "../utils/matomo"
+
 export interface IBoxItem {
   emoji: string
   title: string
   description: string
+  matomo: MatomoEventOptions
 }
 
 export interface IProps {
@@ -37,7 +40,7 @@ const colors = [
   "gridRed",
   "gridBlue",
   "gridGreen",
-  "gridOrange",
+  "warning",
   "gridPink",
   "gridPurple",
 ]
@@ -81,7 +84,14 @@ const BoxGrid: React.FC<IProps> = ({ items }) => {
               transform: "skewX(-5deg)",
               boxShadow: "tableBoxShadow",
             }}
-            onClick={() => setOpenIndex(idx)}
+            onClick={() => {
+              setOpenIndex(idx)
+              trackCustomEvent({
+                eventCategory: item.matomo.eventCategory,
+                eventAction: item.matomo.eventAction,
+                eventName: item.matomo.eventName,
+              })
+            }}
             key={idx}
           >
             <Emoji

src/components/AssetDownload.tsx

@@ -1,13 +1,15 @@
 // Libraries
 import React from "react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
-import Translation from "./Translation"
-import { TranslationKey } from "../utils/translations"
+import { Flex, FlexProps, Heading, Image, Text } from "@chakra-ui/react"
+
 // Components
+import Translation from "./Translation"
 import Emoji from "./Emoji"
-import { Flex, Heading, Image, Text } from "@chakra-ui/react"
 
-export interface IProps {
+import type { TranslationKey } from "../utils/translations"
+
+export interface IProps extends FlexProps {
   children?: React.ReactNode
   image?: IGatsbyImageData
   emoji?: string
@@ -25,6 +27,7 @@ const Callout: React.FC<IProps> = ({
   descriptionKey,
   children,
   className,
+  ...rest
 }) => (
   <Flex
     direction="column"
@@ -40,6 +43,7 @@ const Callout: React.FC<IProps> = ({
     mb={{ base: 16, lg: 4 }}
     borderRadius="base"
     className={className}
+    {...rest}
   >
     {image && (
       <Image