post-merge updates: web2 vs web3 page

.all-contributorsrc

@@ -8142,6 +8142,42 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "chendatony31",
+      "name": "Tony Chen",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2173383?v=4",
+      "profile": "https://tokenpocket.pro",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "metalc",
+      "name": "metalc",
+      "avatar_url": "https://avatars.githubusercontent.com/u/102876192?v=4",
+      "profile": "https://github.com/metalc",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Tuongg2312",
+      "name": "Tuongg2312",
+      "avatar_url": "https://avatars.githubusercontent.com/u/107551539?v=4",
+      "profile": "https://github.com/Tuongg2312",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "ErikSaunier",
+      "name": "Ξrik Saunier",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1122363?v=4",
+      "profile": "https://github.com/ErikSaunier",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1305,6 +1305,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/NachoRoizman"><img src="https://avatars.githubusercontent.com/u/107893772?v=4?s=100" width="100px;" alt=""/><br /><sub><b>NachoRoizman</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=NachoRoizman" title="Documentation">📖</a></td>
     <td align="center"><a href="https://linkedin.com/in/miragaya-ivan"><img src="https://avatars.githubusercontent.com/u/72365253?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Iván Miragaya</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=M-Ivan" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/smejak"><img src="https://avatars.githubusercontent.com/u/20759274?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jakub Smékal</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=smejak" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://tokenpocket.pro"><img src="https://avatars.githubusercontent.com/u/2173383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tony Chen</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=chendatony31" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/metalc"><img src="https://avatars.githubusercontent.com/u/102876192?v=4?s=100" width="100px;" alt=""/><br /><sub><b>metalc</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=metalc" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Tuongg2312"><img src="https://avatars.githubusercontent.com/u/107551539?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tuongg2312</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Tuongg2312" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/ErikSaunier"><img src="https://avatars.githubusercontent.com/u/1122363?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ξrik Saunier</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=ErikSaunier" title="Documentation">📖</a></td>
   </tr>
 </table>
 

docs/event-tracking.md

@@ -0,0 +1,97 @@
+# Event tracking on ethereum.org
+
+This is a guide on how to prepare event tracking when creating a new page or redesigning an existing page.
+
+## What are events?
+
+Events are user interactions on the application that standard pageviews cannot track within a session. We create custom code snippets in the application in order to trigger these events.
+
+Events are useful for measuring user engagement on the website. Tracking events lets us know when users interact with elements and forms and can help us understand how successful users are at accomplishing their goals.
+
+Event tracking is a great way to validate our design decisions and assumptions. We can create reports in Matomo to gather insights and improve our product.
+
+[View the Matomo guide on event tracking](https://matomo.org/guide/reports/event-tracking/).
+
+## How is event tracking implemented?
+
+ethereum.org uses Matomo, an open-source alternative to Google Analytics, allowing us to protect user privacy by not sharing any analytics with third parties.
+
+We implemented Matomo using the [JavaScript tracking client](https://developer.matomo.org/guides/tracking-javascript-guide) via the [`gatsby-matomo-plugin`](https://github.com/kremalicious/gatsby-plugin-matomo) Gatsby plugin.
+
+## What to measure?
+
+Ideally, ask yourself what design decision/assumptions have been made on the page and should/could be validated by measured performance:
+
+- clicks
+- downloads
+- site searches
+- popups viewed/dismissed
+- form fields abandoned
+- scroll behavior down a page
+
+This data can be later used to decide whether a feature is being used or is underperforming.
+
+It's helpful to ask yourself how the results of what we track and measure might influence our decision-making. For example, measuring something that won't help us make concrete product decisions is probably not worth tracking.
+
+# How to name events?
+
+Broadly, events should be grouped by specific topic (e.g. L2 page external links, selected bridge, selected cex).
+
+## Each event comprises of 4 hierarchical values:
+
+1. Category (other events may share the same category if one feature has several actions)
+2. Action
+3. Name (optional)
+4. Value (optional, can be number or text)
+
+## Category
+
+Please consider the page's visual position when deciding which events should be grouped together (under the same category). Ideally, all events related to one feature should be grouped together under the same category only if there is also a single position on the page where the event can be triggered. If in doubt, always use a different category when a feature gets used in multiple places on the page.
+
+Example:
+Find wallets page redirects to external links (wallets) in two positions: A) through the main list of wallets B) Through a modal window with detailed info about a specific wallet. In this case, we would like to have two separate categories for external links instead of one:
+
+- Matomo list view
+  - Category: WalletExternalLinkList
+  - Action: Go to wallet
+  - eventName: WalletName
+  - Value: position
+- Matomo modal view
+  - Category: WalletExternalLinkModal
+  - Action: Go to wallet
+  - eventName: WalletName
+  - Value: position
+
+Such division allows us to identify where a user clicked on the page precisely; if all external links were under one category, "ExternalLink", we would not be able to measure the performance difference between the list and the modal window.
+
+## Usage
+
+Ethereum.org has a utility function (`trackCustomEvent`) for easily creating Matomo events.
+
+```javascript
+import { trackCustomEvent } from "../utils/matomo"
+```
+
+The function requires an object of event options. See the example below.
+
+```javascript
+const handleEvent = (): void => {
+  trackCustomEvent({
+    eventCategory: `FeedbackWidget toggled`,
+    eventAction: `Clicked`,
+    eventName: `Opened feedback widget`,
+    eventValue: `1`,
+  })
+}
+```
+
+## Hidden gem of tracking: Value
+
+Can be used to get more info on the UX.
+
+Examples:
+
+- Use it to track the average position of clicked search result
+- What terms are entered into the search field
+- Which option is chosen from a dropdown menu
+- How many or what filters are applied when filtering the list of wallets

package.json

@@ -79,6 +79,7 @@
     "@types/node": "^17.0.23",
     "@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",

redirects.json

@@ -362,5 +362,13 @@
   {
     "fromPath": "/*/contributing/translation-program/content-versions/",
     "toPath": "/:splat/contributing/translation-program/content-buckets/"
+  },
+  {
+    "fromPath": "/*/developers/docs/smart-contracts/source-code-verification/",
+    "toPath": "/:splat/developers/docs/smart-contracts/verifying/"
+  },
+  {
+    "fromPath": "/*/developers/docs/smart-contracts/upgrading-smart-contracts/",
+    "toPath": "/:splat/developers/docs/smart-contracts/upgrading/"
   }
 ]

src/components/AssetDownload.tsx

@@ -26,7 +26,7 @@ interface IPropsWithSVG extends IPropsBase {
 }
 interface IPropsWithImage extends IPropsBase {
   svg?: never
-  image: string
+  image: any
 }
 
 export type IProps = IPropsWithImage | IPropsWithSVG

src/components/ButtonLink.tsx

@@ -85,7 +85,7 @@ const SecondaryScrollLink = styled(StyledScrollButton)`
   }
 `
 
-interface IProps extends ILinkProps, MarginProps {
+export interface IProps extends ILinkProps, MarginProps {
   toId?: string
   isSecondary?: boolean
 }

src/components/Leaderboard.tsx

@@ -64,7 +64,7 @@ const githubUrl = `https://github.com/`
 
 export interface Person {
   name: string
-  username: string
+  username?: string
   score: number
 }
 

src/components/Nav/index.tsx

@@ -429,7 +429,7 @@ const Nav: React.FC<IProps> = ({ handleThemeChange, isDarkTheme, path }) => {
               <Menu path={path} sections={linkSections} />
             </LeftItems>
             <RightItems>
-              <Search useKeyboardShortcuts />
+              <Search useKeyboardShortcut />
               <ThemeToggle
                 onClick={handleThemeChange}
                 aria-label={

src/components/PageHero.js → src/components/PageHero.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import styled from "styled-components"
 import { GatsbyImage } from "gatsby-plugin-image"
-import ButtonLink from "./ButtonLink"
+import ButtonLink, { IProps as IButtonLinkProps } from "./ButtonLink"
 import { Content } from "./SharedStyledComponents"
 
-const HeroContainer = styled.div`
+export interface IIsReverse {
+  isReverse: boolean
+}
+
+const HeroContainer = styled.div<IIsReverse>`
   display: flex;
   justify-content: space-between;
   margin-top: 2rem;
@@ -89,7 +93,32 @@ const StyledButtonLink = styled(ButtonLink)`
   }
 `
 
-const PageHero = ({ content, children, className, isReverse }) => {
+export interface IButton extends Partial<IButtonLinkProps> {
+  content: string
+}
+
+export interface IContent {
+  buttons?: Array<IButton>
+  title: string
+  header: string
+  subtitle: string
+  image: string
+  alt: string
+}
+
+export interface IProps {
+  content: IContent
+  isReverse?: boolean
+  children?: React.ReactNode
+  className?: string
+}
+
+const PageHero: React.FC<IProps> = ({
+  content,
+  isReverse = false,
+  children,
+  className,
+}) => {
   const { buttons, title, header, subtitle, image, alt } = content
   return (
     <Content>
@@ -104,8 +133,8 @@ const PageHero = ({ content, children, className, isReverse }) => {
                 <StyledButtonLink
                   isSecondary={button.isSecondary}
                   key={idx}
-                  to={button.path}
-                  toId={button.pathId}
+                  to={button.to}
+                  toId={button.toId}
                 >
                   {button.content}
                 </StyledButtonLink>

src/components/Search/Input.js → src/components/Search/Input.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { ChangeEvent, FormEvent } from "react"
 import { useIntl } from "react-intl"
 import styled from "styled-components"
 import { connectSearchBox } from "react-instantsearch-dom"
@@ -57,17 +57,31 @@ const SearchSlash = styled.p`
   }
 `
 
-const Input = ({ query, setQuery, refine, inputRef, ...rest }) => {
+interface IInputProps
+  extends React.ComponentPropsWithoutRef<typeof StyledInput> {
+  query: string
+  setQuery: (query: string) => void
+  refine: (query: string) => void
+  inputRef: React.MutableRefObject<HTMLInputElement>
+}
+
+const Input: React.FC<IInputProps> = ({
+  query,
+  setQuery,
+  refine,
+  inputRef,
+  ...rest
+}) => {
   const intl = useIntl()
   const searchString = translateMessageId("search", intl)
 
-  const handleInputChange = (event) => {
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
     const value = event.target.value
     refine(value)
     setQuery(value)
   }
 
-  const handleSubmit = (event) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
     event.preventDefault()
   }