Merge branch 'dev' into fix_whitepaper

Author: pettinarip

.all-contributorsrc

@@ -10920,6 +10920,51 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "o2Stake",
+      "name": "Tim - o2Stake",
+      "avatar_url": "https://avatars.githubusercontent.com/u/77958700?v=4",
+      "profile": "http://o2stake.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "b-wagn",
+      "name": "Benedikt Wagner",
+      "avatar_url": "https://avatars.githubusercontent.com/u/113296072?v=4",
+      "profile": "http://benedikt-wagner.dev",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "tdahar",
+      "name": "Tarun Mohandas Daryanani",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18716811?v=4",
+      "profile": "https://github.com/tdahar",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "Crosstons",
+      "name": "Shubh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/110349596?v=4",
+      "profile": "https://github.com/Crosstons",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "duckdegen",
+      "name": "duckdegen",
+      "avatar_url": "https://avatars.githubusercontent.com/u/98649644?v=4",
+      "profile": "https://github.com/duckdegen",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.eslintrc.json

@@ -1,5 +1,9 @@
 {
-  "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"],
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
   "env": { "es6": true },
   "plugins": ["simple-import-sort"],
   "rules": {

.github/ISSUE_TEMPLATE/event_listing.yaml

@@ -0,0 +1,69 @@
+name: Event listing
+description: Request an Ethereum event for listing
+title: Event listing
+labels: ["event :calendar:"]
+body:
+  - type: input
+    id: event_listing_name
+    attributes:
+      label: Event/Meetup Name
+      description: Name for the event to be listed
+    validations:
+      required: true
+  - type: input
+    id: event_listing_website
+    attributes:
+      label: Website
+      description: Publicly available website URL to get more information about the event
+    validations:
+      required: true
+  - type: input
+    id: event_listing_location
+    attributes:
+      label: Location (City/Country, or Remote)
+      description: Geographic location of in-person event, or "Remote" for a virtual event
+    validations:
+      required: true
+  - type: input
+    id: event_listing_description
+    attributes:
+      label: Description
+      description: Brief description of event
+    validations:
+      required: true
+  - type: input
+    id: event_listing_start_date
+    attributes:
+      label: "Start date: (yyyy-mm-dd)"
+      description: Start date of event in yyyy-mm-dd format
+    validations:
+      required: true
+  - type: input
+    id: event_listing_end_date
+    attributes:
+      label: "End date: (yyyy-mm-dd)"
+      description: End date of event in yyyy-mm-dd format
+    validations:
+      required: true
+  - type: textarea
+    id: event_listing_additional_context
+    attributes:
+      label: Additional context
+      description: Add any other context about the event here
+  - type: markdown
+    attributes:
+      value: |
+        **Note:**
+        Events will be only added on the "Upcoming events" table if all fields above are completed, pending approval
+  - type: markdown
+    attributes:
+      value: |
+        **Want to contribute?**
+        We love contributions from the Ethereum community! Please comment on an issue if you're interested in helping out with a PR.
+  - type: checkboxes
+    id: event_listing_work_on
+    attributes:
+      label: Would you like to work on this issue?
+      options:
+        - label: "Yes"
+          required: false

.gitignore

@@ -49,3 +49,6 @@ robots.txt
 
 # .crowdin folder used as temp forlder for crowdin-import script
 .crowdin
+
+# vscode workplace configuration
+.vscode

.storybook/preview.ts

@@ -11,7 +11,7 @@ const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints)
 
 const preview: Preview = {
   globals: {
-    locale: 'en',
+    locale: "en",
     locales: baseLocales,
   },
   parameters: {

README.md

@@ -91,10 +91,10 @@ git checkout -b new_branch_name
 2. Start developing!
 
 ```sh
-yarn start
+yarn dev
 ```
 
-- Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:8000` from your browser
+- Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:3000` from your browser
 - Pro Tip:
   - Explore scripts within `package.json` for more build options
   - Get **faster** local builds by building only one language. E.g. in your `.env` file, set `BUILD_LOCALES=en` to build the content only in English
@@ -1705,6 +1705,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/kamuik16"><img src="https://avatars.githubusercontent.com/u/93703995?v=4?s=100" width="100px;" alt="Krishang Shah"/><br /><sub><b>Krishang Shah</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=kamuik16" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/vuvoth"><img src="https://avatars.githubusercontent.com/u/45826131?v=4?s=100" width="100px;" alt="Vu Vo"/><br /><sub><b>Vu Vo</b></sub></a><br /><a href="#content-vuvoth" title="Content">🖋</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="http://o2stake.com"><img src="https://avatars.githubusercontent.com/u/77958700?v=4?s=100" width="100px;" alt="Tim - o2Stake"/><br /><sub><b>Tim - o2Stake</b></sub></a><br /><a href="#content-o2Stake" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://benedikt-wagner.dev"><img src="https://avatars.githubusercontent.com/u/113296072?v=4?s=100" width="100px;" alt="Benedikt Wagner"/><br /><sub><b>Benedikt Wagner</b></sub></a><br /><a href="#content-b-wagn" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tdahar"><img src="https://avatars.githubusercontent.com/u/18716811?v=4?s=100" width="100px;" alt="Tarun Mohandas Daryanani"/><br /><sub><b>Tarun Mohandas Daryanani</b></sub></a><br /><a href="#content-tdahar" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Crosstons"><img src="https://avatars.githubusercontent.com/u/110349596?v=4?s=100" width="100px;" alt="Shubh"/><br /><sub><b>Shubh</b></sub></a><br /><a href="#content-Crosstons" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/duckdegen"><img src="https://avatars.githubusercontent.com/u/98649644?v=4?s=100" width="100px;" alt="duckdegen"/><br /><sub><b>duckdegen</b></sub></a><br /><a href="#content-duckdegen" title="Content">🖋</a></td>
+    </tr>
   </tbody>
 </table>
 

docs/api-keys.md

@@ -11,7 +11,7 @@ We recommend setting this up when running the project locally, as we use the Git
 
 ```sh
 # .env Example:
-GATSBY_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
+NEXT_PUBLIC_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
 ```
 
 2. Add Etherscan API token (free)
@@ -25,13 +25,3 @@ GATSBY_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
 # .env Example:
 ETHERSCAN_API_KEY=K6NUTARFJZJCIXHF1F1E1YGJZ8RQ29BE4U
 ```
-
-3. Add DeFiPulse API token (free)
-
-> - [Follow this guide](https://docs.defipulse.com/quick-start-guide) to create an account and get your DeFiPulse API token
-> - Copy & paste your Active API Key from DeFiPulse into `.env`
-
-```sh
-# .env Example:
-DEFI_PULSE_API_KEY=4953aaf7966dad9c129397e197a0630ed0594f66962dd5fb058972b250da
-```

docs/applying-storybook.md

@@ -18,7 +18,7 @@ It's as easy as running `yarn storybook` to boot up a dedicated localhost to see
 
 ## Setting up a component's stories
 
-> 🚨 NOTE: This project has version 7, which is currently still in beta. The following documentation outlines preferences in setup as it relates to this version. You can refer to the [7.0 beta docs](https://storybook.js.org/docs/7.0/react/) if you need any additional details
+> 🚨 NOTE: This project uses Storybook v7. The following documentation outlines preferences in setup as it relates to this version. You can refer to the [main docs](https://storybook.js.org/docs/get-started/install) if you need any additional details
 
 A Storybook "story" is an instance of a component in a certain state or with certain parameters applied to show an alternative version of the component.
 
@@ -42,13 +42,13 @@ import ComponentA from "."
 
 type ComponentAType = typeof ComponentA
 
-const meta: Meta<ComponentAType> {
+const meta {
   title: "ComponentA",
   component: ComponentA
-}
+} satisfies Meta<ComponentAType>
 
 export default meta
-type Story = StoryObj<ComponentAType>;
+type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   render: () => <ComponentA />
@@ -68,13 +68,13 @@ import Button from "."
 
 type ButtonType = typeof Button
 
-const meta: Meta<ButtonType> {
+const meta {
   title: "Button",
   component: Button
-}
+} satisfies Meta<ButtonType>
 
 export default meta
-type Story = StoryObj<ButtonType>;
+type Story = StoryObj<typeof meta>;
 
 export const Solid: Story = {
   render: (args) => <Button {...args}>A Button</Button>,
@@ -116,7 +116,7 @@ The dashboard where you view each story has a number of different addons availab
 
 Outlined below are each area going from left to right in the selections.
 
-| Sidebar above the preview                | Dashboard below the preview                                                                                                                                                                                                                                                |
+| Toolbar above the preview                | Panel below the preview                                                                                                                                                                                                                                                    |
 | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 1. Rerender preview                      | 1. Controls - allows you to interact with a component’s args (inputs) dynamically. Experiment with alternate configurations of the component to discover edge cases. See [Controls addon docs](https://storybook.js.org/docs/7.0/react/essentials/controls)                |
 | 2. Zoom In                               | 2. Actions (if applicable) - help you verify interactions produce the correct outputs via callbacks. See [Actions addon docs](https://storybook.js.org/docs/7.0/react/essentials/actions)                                                                                  |

docs/best-practices.md

@@ -52,7 +52,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 
   - _tl;dr Each individual JSON entry should be a complete phrase by itself_
 
-- This is done using the `Translation` component. However there is an alternative method for regular JS: using the `t` function from `gatsby-plugin-react-i18next`
+- This is done using the `Translation` component. However there is an alternative method for regular JS: using the `t` function from `next-i18next`
 
   - **Method one: `<Translation />` component (preferred if only needed in JSX)**
 
@@ -66,7 +66,7 @@ Markdown will be translated as whole pages of content, so no specific action is
   - **Method two: `t()`**
 
     ```tsx
-    import { useTranslation } from "gatsby-plugin-react-i18next"
+    import { useTranslation } from "next-i18next"
 
     // Utilize anywhere in JS using
     const { t } = useTranslation()
@@ -104,7 +104,7 @@ export default ComponentName
 
 We use [Chakra UI](https://chakra-ui.com/).
 
-`src/@chakra-ui/gatsby-plugin/theme.ts` - Holds all the theme configuration. This is where you can find the colors, fonts, component themes, variants, etc.
+`src/@chakra-ui/theme.ts` - Holds all the theme configuration. This is where you can find the colors, fonts, component themes, variants, etc.
 
 - Wrappers or layout divs
 
@@ -149,7 +149,7 @@ Use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/th
 <Text color="primary.base" bg="background.base" />
 ```
 
-> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/%40chakra-ui/gatsby-plugin/semanticTokens.ts)
+> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/@chakra-ui/semanticTokens.ts)
 
 > Note 2: all the previous colors defined in the old theme `src/theme.ts` were
 > ported into the new theme for compatibility reasons. Those colors will
@@ -177,63 +177,10 @@ import { BsQuestionSquareFill } from "react-icons/bs"
 ;<Icon as={BsQuestionSquareFill} />
 ```
 
-## Image loading and API calls using GraphQL
+## Using custom `Image` component
 
-- [Gatsby + GraphQL](https://www.gatsbyjs.com/docs/graphql/) used for loading of images and preferred for API calls (in lieu of REST, if possible/practical). Utilizes static page queries that run at build time, not at run time, optimizing performance.
-- Image loading example:
+[Next Image](https://nextjs.org/docs/pages/api-reference/components/image) is the component of choice to handle responsive images. However, we use a custom version of this component that is properly optimized with Chakra. This way we can use style props from Chakra but still be able to forward common or Next Image-specific props to the component for correct usage and rendering.
 
 ```tsx
-import { graphql } from "gatsby"
-
-export const query = graphql`
-  query {
-    hero: file(relativePath: { eq: "developers-eth-blocks.png" }) {
-      childImageSharp {
-        gatsbyImageData(
-          width: 800
-          layout: FIXED
-          placeholder: BLURRED
-          quality: 100
-        )
-      }
-    }
-  }
-`
-// These query results get passed as an object `props.data` to your component
-```
-
-- API call example:
-
-```tsx
-import { graphql } from "gatsby"
-
-export const repoInfo = graphql`
-  fragment repoInfo on GitHub_Repository {
-    stargazerCount
-    languages(orderBy: { field: SIZE, direction: DESC }, first: 2) {
-      nodes {
-        name
-      }
-    }
-    url
-  }
-`
-export const query = graphql`
-  query {
-    hardhatGitHub: github {
-      repository(owner: "nomiclabs", name: "hardhat") {
-        ...repoInfo
-      }
-    }
-  }
-`
-// These query results get passed as an object `props.data` to your component
-```
-
-### Using custom `GatsbyImage`
-
-[GatsbyImage](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) is the component of choice to handle responsive images processed through graphql. However, we use a custom version of this component that is properly optimized with Chakra. This way we can use style props from Chakra but still be able to forward common or GatsbyImage-specific props to the Gatsby component for correct usage and rendering.
-
-```tsx
-import GatsbyImage from "./components/GatsbyImage"
+import { Image } from "@/components/Image"
 ```