Deploy v2.30.0

.all-contributorsrc

@@ -1713,7 +1713,12 @@
       "profile": "https://github.com/ryancreatescopy",
       "contributions": [
         "doc",
-        "code"
+        "code",
+        "design",
+        "bug",
+        "ideas",
+        "review",
+        "content"
       ]
     },
     {
@@ -3805,6 +3810,60 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "Karthickmerk",
+      "name": "Karthickmerk",
+      "avatar_url": "https://avatars.githubusercontent.com/u/53270101?v=4",
+      "profile": "https://github.com/Karthickmerk",
+      "contributions": [
+        "ideas"
+      ]
+    },
+    {
+      "login": "hueyhe",
+      "name": "Sihong",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13460383?v=4",
+      "profile": "https://github.com/hueyhe",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "AmirAliM",
+      "name": "AmirAliM",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8203572?v=4",
+      "profile": "https://github.com/AmirAliM",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "Rub3cula",
+      "name": "Rub3cula",
+      "avatar_url": "https://avatars.githubusercontent.com/u/63545006?v=4",
+      "profile": "https://github.com/Rub3cula",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "pawurb",
+      "name": "Paweł Urbanek",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1131944?v=4",
+      "profile": "https://pawelurbanek.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "adi44",
+      "name": "Aditya Dhir",
+      "avatar_url": "https://avatars.githubusercontent.com/u/31381639?v=4",
+      "profile": "https://github.com/adi44",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -76,13 +76,35 @@ We recommend setting this up when running the project locally, as we use the Git
 > - [Follow these instructions](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) to create a personal GitHub API token
 >   - When selecting scopes in step 7, leave everything unchecked (the data we fetch doesn't require any [scope](https://docs.github.com/en/developers/apps/scopes-for-oauth-apps#available-scopes))
 > - In local repo root directory: Make a copy of `.env.example` and name it `.env`
-> - Copy & paste your new GitHub API token in `.env`
+> - Copy & paste your new GitHub API token into `.env`
 
 ```
 // .env Example:
 GATSBY_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
 ```
 
+5. Add Etherscan API token (free)
+
+> - [Create an account](https://etherscan.io/) on Etherscan
+> - Navigate to your Account Settings page
+> - In the sidebar, click on 'API-KEYs' and add a new token
+> - Copy & paste your Api-Key Token from Etherscan into `.env`
+
+```
+// .env Example:
+ETHERSCAN_API_KEY=K6NUTARFJZJCIXHF1F1E1YGJZ8RQ29BE4U
+```
+
+6. 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`
+
+```
+// .env Example:
+DEFI_PULSE_API_KEY=4953aaf7966dad9c129397e197a0630ed0594f66962dd5fb058972b250da
+```
+
 ### Make awesome changes!
 
 1. Create new branch for your changes
@@ -675,7 +697,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/shad-k"><img src="https://avatars1.githubusercontent.com/u/23720732?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shadab Khan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=shad-k" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/ryancreatescopy"><img src="https://avatars2.githubusercontent.com/u/40891631?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ryancreatescopy</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=ryancreatescopy" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=ryancreatescopy" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ryancreatescopy"><img src="https://avatars2.githubusercontent.com/u/40891631?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ryancreatescopy</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=ryancreatescopy" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=ryancreatescopy" title="Code">💻</a> <a href="#design-ryancreatescopy" title="Design">🎨</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Aryancreatescopy" title="Bug reports">🐛</a> <a href="#ideas-ryancreatescopy" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ethereum/ethereum-org-website/pulls?q=is%3Apr+reviewed-by%3Aryancreatescopy" title="Reviewed Pull Requests">👀</a> <a href="#content-ryancreatescopy" title="Content">🖋</a></td>
     <td align="center"><a href="http://jutt.ca"><img src="https://avatars3.githubusercontent.com/u/7143583?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hammad Jutt</b></sub></a><br /><a href="#content-hammadj" title="Content">🖋</a></td>
     <td align="center"><a href="https://becaz.org"><img src="https://avatars2.githubusercontent.com/u/58934348?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Becaz</b></sub></a><br /><a href="#ideas-becaz" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://github.com/caosbad"><img src="https://avatars2.githubusercontent.com/u/10805199?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Caos</b></sub></a><br /><a href="#content-caosbad" title="Content">🖋</a></td>
@@ -966,6 +988,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="http://linkedin.com/in/ayushman17/"><img src="https://avatars.githubusercontent.com/u/53474591?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ayushman Singh Chauhan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Aayushman17" title="Bug reports">🐛</a> <a href="#content-ayushman17" title="Content">🖋</a></td>
     <td align="center"><a href="https://www.linkedin.com/in/keqi-huang/"><img src="https://avatars.githubusercontent.com/u/28261876?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Keqi Huang</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3ALisanaaa" title="Bug reports">🐛</a> <a href="#content-Lisanaaa" title="Content">🖋</a></td>
     <td align="center"><a href="https://github.com/DavidPlutus"><img src="https://avatars.githubusercontent.com/u/63456936?v=4?s=100" width="100px;" alt=""/><br /><sub><b>davidplutus</b></sub></a><br /><a href="#ideas-davidplutus" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/Karthickmerk"><img src="https://avatars.githubusercontent.com/u/53270101?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Karthickmerk</b></sub></a><br /><a href="#ideas-Karthickmerk" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/hueyhe"><img src="https://avatars.githubusercontent.com/u/13460383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sihong</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=hueyhe" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/AmirAliM"><img src="https://avatars.githubusercontent.com/u/8203572?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AmirAliM</b></sub></a><br /><a href="#content-AmirAliM" title="Content">🖋</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Rub3cula"><img src="https://avatars.githubusercontent.com/u/63545006?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rub3cula</b></sub></a><br /><a href="#content-Rub3cula" title="Content">🖋</a></td>
+    <td align="center"><a href="https://pawelurbanek.com"><img src="https://avatars.githubusercontent.com/u/1131944?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Paweł Urbanek</b></sub></a><br /><a href="#content-pawurb" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/adi44"><img src="https://avatars.githubusercontent.com/u/31381639?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aditya Dhir</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Aadi44" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "2.29.2",
+  "version": "2.30.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",

src/components/FileContributors.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react"
+import React, { useState } from "react"
 import { useIntl } from "gatsby-plugin-intl"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 import { useQuery, gql } from "@apollo/client"
 
 import ButtonLink from "./ButtonLink"
@@ -11,9 +11,27 @@ import Translation from "./Translation"
 import { ButtonSecondary } from "./SharedStyledComponents"
 import { getLocaleTimestamp } from "../utils/time"
 
+const loadingStyles = css`
+  font-size: 0;
+  background: ${({ theme }) =>
+    `linear-gradient(-90deg, ${theme.colors.lightBorder} 0%, ${theme.colors.searchBackgroundEmpty} 50%, ${theme.colors.lightBorder} 100%)`};
+  background-size: 400% 400%;
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+`
+
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
+  position: relative;
 
   border-radius: 2px;
   padding: 0.5rem;
@@ -29,6 +47,23 @@ const Container = styled.div`
   }
 `
 
+const SkeletonContainer = styled(Container)`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 1;
+  transition: opacity 0.15s ease-in-out;
+
+  ${({ loading }) =>
+    !loading &&
+    `
+    opacity: 0;
+    pointer-events: none;
+  `}
+`
+
 const LeftContent = styled.div`
   display: flex;
   align-items: center;
@@ -38,24 +73,62 @@ const LeftContent = styled.div`
   }
 `
 
+const SkeletonLeftContent = styled(LeftContent)`
+  flex: 1;
+  @media (max-width: ${(props) => props.theme.breakpoints.m}) {
+    flex: none;
+  }
+`
+
 const Avatar = styled.img`
   height: 40px;
   width: 40px;
   margin-right: 0.5rem;
   border-radius: 50%;
 `
 
+const SkeletonAvatar = styled.div`
+  height: 40px;
+  width: 40px;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+  ${loadingStyles}
+`
+
 const Info = styled.div`
   line-height: 130%;
   color: ${(props) => props.theme.colors.text200};
 `
 
+const SkeletonInfo = styled(Info)`
+  ${loadingStyles}
+  height: 40px;
+  flex: 1;
+  border-radius: 3px;
+`
+
 const ButtonContainer = styled.div`
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
 `
 
+const SkeletonButtonContainer = styled(ButtonContainer)`
+  ${loadingStyles}
+  width: 145px;
+  border-radius: 3px;
+  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
+    margin-top: 1rem;
+    justify-content: center;
+    width: calc(50% - 2rem);
+  }
+  @media (max-width: ${(props) => props.theme.breakpoints.m}) {
+    height: 40px;
+    width: 50%;
+    margin-top: 1rem;
+  }
+`
+
 const ContributorsButton = styled(ButtonSecondary)`
   background-color: ${(props) => props.theme.colors.background};
   margin-top: 0;
@@ -70,6 +143,12 @@ const ContributorsButton = styled(ButtonSecondary)`
     justify-content: center;
     width: 50%;
   }
+
+  ${({ loading }) =>
+    loading &&
+    `
+    visibility: hidden;
+  `}
 `
 
 const GithubButton = styled(ButtonLink)`
@@ -151,28 +230,31 @@ const FileContributors = ({ relativePath, className, editPath }) => {
     variables: { relativePath },
   })
 
-  if (loading || error) return null
+  if (error) return null
 
-  const commits = data.repository?.ref?.target?.history?.edges?.map(
+  const commits = data?.repository?.ref?.target?.history?.edges?.map(
     (commit) => commit.node
   )
 
-  const lastCommit = commits[0]
-  if (typeof lastCommit === "undefined") return null
-  const lastContributor = lastCommit.author
-  const uniqueContributors = commits.reduce(
-    (res, cur) => {
-      for (const contributor of res) {
-        const hasAuthorInfo = !!contributor.user && !!cur.author.user
-        if (hasAuthorInfo && contributor.user.login === cur.author.user.login) {
-          return res
+  const lastCommit = commits?.[0] || {}
+  const lastContributor = lastCommit?.author || {}
+  const uniqueContributors =
+    commits?.reduce(
+      (res, cur) => {
+        for (const contributor of res) {
+          const hasAuthorInfo = !!contributor.user && !!cur.author.user
+          if (
+            hasAuthorInfo &&
+            contributor.user.login === cur.author.user.login
+          ) {
+            return res
+          }
         }
-      }
-      res.push(cur.author)
-      return res
-    },
-    [lastContributor]
-  )
+        res.push(cur.author)
+        return res
+      },
+      [lastContributor]
+    ) || []
 
   return (
     <div className={className}>
@@ -196,6 +278,13 @@ const FileContributors = ({ relativePath, className, editPath }) => {
         </ContributorList>
       </Modal>
       <Container>
+        <SkeletonContainer loading={!!loading}>
+          <SkeletonLeftContent>
+            <SkeletonAvatar />
+            <SkeletonInfo />
+          </SkeletonLeftContent>
+          <SkeletonButtonContainer />
+        </SkeletonContainer>
         <LeftContent>
           <Avatar src={lastContributor.avatarUrl} alt={lastContributor.name} />
           <Info>
@@ -210,7 +299,10 @@ const FileContributors = ({ relativePath, className, editPath }) => {
           </Info>
         </LeftContent>
         <ButtonContainer>
-          <ContributorsButton onClick={() => setModalOpen(true)}>
+          <ContributorsButton
+            onClick={() => setModalOpen(true)}
+            loading={loading}
+          >
             <Translation id="see-contributors" />
           </ContributorsButton>
           {editPath && (

src/components/Roadmap.js

@@ -97,7 +97,8 @@ const Roadmap = () => {
             .filter(
               (issue) =>
                 issue.state === "closed" &&
-                "allcontributors[bot]" !== issue.user.login
+                "allcontributors[bot]" !== issue.user.login &&
+                !!issue.pull_request
             )
             .slice(0, 6)
           setIssues({

src/components/StablecoinAccordion.js

@@ -20,7 +20,6 @@ import {
 } from "./SharedStyledComponents"
 
 import { translateMessageId } from "../utils/translations"
-import { BsTypeH3 } from "react-icons/bs"
 
 const Card = styled.div`
   border-radius: 2px;

src/components/StatsBoxGrid.js

@@ -197,19 +197,19 @@ const StatsBoxGrid = () => {
     // Skip APIs when not in production
     if (process.env.NODE_ENV !== "production") {
       setEthPrice({
-        value: formatPrice(1330),
+        value: formatPrice(2265),
         hasError: false,
       })
       setValueLocked({
-        value: formatTVL(23456789000),
+        value: formatTVL(57141111000),
         hasError: false,
       })
       setTxs({
-        value: formatTxs(1234567),
+        value: formatTxs(1305167),
         hasError: false,
       })
       setNodes({
-        value: formatNodes(8040),
+        value: formatNodes(5472),
         hasError: false,
       })
     } else {