Deploy v6.9.3

.all-contributorsrc

@@ -9590,6 +9590,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "florath",
+      "name": "Andreas Florath",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11856543?v=4",
+      "profile": "https://github.com/florath",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1509,6 +1509,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center"><a href="https://github.com/owenHwang"><img src="https://avatars.githubusercontent.com/u/112543777?v=4?s=100" width="100px;" alt="Owen Hwang"/><br /><sub><b>Owen Hwang</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=owenHwang" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/florath"><img src="https://avatars.githubusercontent.com/u/11856543?v=4?s=100" width="100px;" alt="Andreas Florath"/><br /><sub><b>Andreas Florath</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=florath" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>

package.json

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

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -19,6 +19,10 @@ const styles = {
       bg: mode("white", "gray.700")(props),
       lineHeight: "1.6rem",
     },
+    a: {
+      color: "primary",
+      textDecoration: "underline",
+    },
     // should be replace with https://chakra-ui.com/docs/components/text
     p: {
       margin: "0px 0px 1.45rem",

src/components/CardList.tsx

@@ -7,6 +7,7 @@ import {
   LinkBox,
   LinkOverlay,
   StackProps,
+  useColorModeValue,
 } from "@chakra-ui/react"
 
 import { ImageProp } from "../types"
@@ -50,6 +51,8 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
   const isLink = !!link
   const isExternal = url.isExternal(link || "")
 
+  const descriptionColor = useColorModeValue("gray.500", "gray.400")
+
   return (
     <CardContainer {...rest}>
       {image && <Box as={GatsbyImage} image={image} alt={alt} minW="20px" />}
@@ -69,7 +72,7 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
           <Box>{title}</Box>
         )}
 
-        <Box fontSize="sm" mb={0} opacity={0.6}>
+        <Box fontSize="sm" mb={0} color={descriptionColor}>
           {description}
         </Box>
       </Flex>

src/components/Pill.tsx

@@ -1,32 +1,6 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { Flex } from "@chakra-ui/react"
 
-const Primary = styled.div<{ color?: string }>`
-  display: flex;
-  background: ${(props) =>
-    props.color
-      ? props.theme.colors[props.color]
-      : props.theme.colors.primary100};
-  color: ${(props) => props.theme.colors.black300};
-  text-transform: uppercase;
-  text-align: center;
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  margin-right: 0.5rem;
-  font-size: 0.75rem;
-  border-radius: 0.25rem;
-`
-const Secondary = styled.div`
-  display: flex;
-  border: 1px solid ${(props) => props.theme.colors.primary100};
-  color: ${(props) => props.theme.colors.text};
-  text-transform: uppercase;
-  text-align: center;
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  border-radius: 0.25rem;
-`
 export interface IProps {
   children?: React.ReactNode
   className?: string
@@ -41,11 +15,38 @@ const Pill: React.FC<IProps> = ({
   color,
 }) => {
   return isSecondary ? (
-    <Secondary className={className}>{children}</Secondary>
+    <Flex
+      border="1px"
+      borderStyle="solid"
+      borderColor="primary100"
+      color="text"
+      textTransform="uppercase"
+      textAlign="center"
+      display="inline-block"
+      py={1}
+      px={2}
+      borderRadius="base"
+      fontSize="xs"
+      className={className}
+    >
+      {children}
+    </Flex>
   ) : (
-    <Primary color={color} className={className}>
+    <Flex
+      backgroundColor={color ? color : "primary100"}
+      display="inline-block"
+      color="black300"
+      textTransform="uppercase"
+      textAlign="center"
+      py={1}
+      px={2}
+      mr={2}
+      fontSize="xs"
+      borderRadius="base"
+      className={className}
+    >
       {children}
-    </Primary>
+    </Flex>
   )
 }
 

src/components/Staking/StakingStatsBox.tsx

@@ -5,6 +5,9 @@ import { useIntl } from "react-intl"
 import { Spinner } from "@chakra-ui/react"
 // Import components
 import Translation from "../Translation"
+import Tooltip from "../Tooltip"
+import Link from "../Link"
+import Icon from "../Icon"
 // Import utilities
 import { Lang } from "../../utils/languages"
 import { getData } from "../../utils/cache"
@@ -49,12 +52,40 @@ const Value = styled.code`
   color: ${({ theme }) => theme.colors.primary};
 `
 
-const Label = styled.p`
+const Label = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
   text-transform: uppercase;
   font-size: 0.875rem;
   margin-top: 0.5rem;
 `
 
+const StyledIcon = styled(Icon)`
+  fill: ${({ theme }) => theme.colors.text};
+  margin-inline-start: 0.5rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.l}) {
+  }
+  &:hover,
+  &:active,
+  &:focus {
+    fill: ${({ theme }) => theme.colors.primary};
+  }
+`
+
+const BeaconchainTooltip = () => (
+  <Tooltip
+    content={
+      <div>
+        <Translation id="data-provided-by" />{" "}
+        <Link to="https://beaconcha.in">Beaconcha.in</Link>
+      </div>
+    }
+  >
+    <StyledIcon name="info" size="16" />
+  </Tooltip>
+)
+
 // Interfaces
 export interface IProps {}
 
@@ -128,6 +159,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
         )}
         <Label>
           <Translation id="page-staking-stats-box-metric-1" />
+          <BeaconchainTooltip />
         </Label>
       </Cell>
       <Cell>
@@ -140,6 +172,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
         )}
         <Label>
           <Translation id="page-staking-stats-box-metric-2" />
+          <BeaconchainTooltip />
         </Label>
       </Cell>
       <Cell>
@@ -152,6 +185,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
         )}
         <Label>
           <Translation id="page-staking-stats-box-metric-3" />
+          <BeaconchainTooltip />
         </Label>
       </Cell>
     </Container>

src/components/StatsBoxGrid.tsx

@@ -62,9 +62,7 @@ const Grid = styled.div`
   }
 `
 
-const Box = styled.div<{
-  color?: string
-}>`
+const Box = styled.div`
   position: relative;
   color: ${({ theme }) => theme.colors.text};
   height: 20rem;
@@ -111,14 +109,12 @@ const Lines = styled.div`
 
 const ButtonContainer = styled.div<{ dir?: Direction }>`
   position: absolute;
-  ${({ dir }) => (dir === "rtl" ? "left:" : "right:")} 20px;
+  ${({ dir }) => (dir === "rtl" ? "left" : "right")}: 20px;
   bottom: 20px;
   font-family: ${(props) => props.theme.fonts.monospace};
 `
 
-const Button = styled.button<{
-  color: string
-}>`
+const Button = styled.button<{ color: string }>`
   background: ${(props) => props.theme.colors.background};
   font-family: ${(props) => props.theme.fonts.monospace};
   font-size: 1.25rem;
@@ -134,9 +130,7 @@ const Button = styled.button<{
   }
 `
 
-const ButtonToggle = styled(Button)<{
-  active: boolean
-}>`
+const ButtonToggle = styled(Button)<{ active: boolean }>`
   ${({ active, theme }) =>
     active &&
     `

src/components/UpgradeStatus.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { TranslationKey } from "../utils/translations"
 import Translation from "./Translation"
-import { Heading, Text, useColorMode, VStack } from "@chakra-ui/react"
+import { Heading, Text, useColorModeValue, VStack } from "@chakra-ui/react"
 
 export interface IStyledContainer {
   isShipped: boolean
@@ -18,10 +18,10 @@ const UpgradeStatus: React.FC<IProps> = ({
   children,
   isShipped = false,
 }) => {
-  const { colorMode } = useColorMode()
-  const border = colorMode === "dark" ? "2px solid" : "none"
+  const border = useColorModeValue("none", "2px solid")
   const darkBorderColor = isShipped ? "#3fb181" : "#a4a4ff"
-  const borderColor = colorMode === "dark" ? darkBorderColor : undefined
+
+  const borderColor = useColorModeValue(undefined, darkBorderColor)
 
   return (
     <VStack

src/content/developers/docs/oracles/index.md

@@ -66,7 +66,7 @@ Different oracles differ in their approach to solving the oracle problem, and we
 
 Users are entities (i.e., smart contracts) that need information external to the blockchain to complete specific actions. The basic workflow of an oracle service starts with the user sending a data request to the oracle contract. Data requests will usually answer some or all of the following questions:
 
-1. What sources can off-chain nodes can consult for the requested information?
+1. What sources can off-chain nodes consult for the requested information?
 
 2. How do reporters process information from data sources and extract useful data points?
 

src/content/developers/docs/smart-contracts/security/index.md

@@ -478,7 +478,29 @@ If you plan on querying an on-chain oracle for asset prices, consider using one
 
 - **[OpenZeppelin Contracts](https://docs.openzeppelin.com/contracts/4.x/)** - _Contract libraries for implementing administrative features, including contract ownership, upgrades, access controls, governance, pauseability, and more._
 
-### Publications of known smart contract vulnerabilities and exploits {#common-smart contract-vulnerabilities-and-exploits}
+### Smart contract auditing services {#smart-contract-auditing-services}
+
+- **[ConsenSys Diligence](https://consensys.net/diligence/)** - _Smart contract auditing service helping projects across the blockchain ecosystem ensure their protocols are ready for launch and built to protect users._
+
+- **[CertiK](https://www.certik.com/)** - _Blockchain security firm pioneering the use of cutting-edge formal Verification technology on smart contracts and blockchain networks._
+
+- **[Trail of Bits](https://www.trailofbits.com/)** - _Cybersecurity company that combines security research with an attacker mentality to reduce risk and fortify code._
+
+- **[PeckShield](https://peckshield.com/)** - _Blockchain security company offering products and services for the security, privacy, and usability of the entire blockchain ecosystem._
+
+- **[QuantStamp](https://quantstamp.com/)** - _Auditing service facilitating the mainstream adoption of blockchain technology through security and risk assessment services._
+
+- **[OpenZeppelin](https://www.openzeppelin.com/security-audits)** - _Smart contract security company providing security audits for distributed systems._
+
+- **[Runtime Verification](https://runtimeverification.com/)** - _Security company specializing in formal modeling and verification of smart contracts._
+
+### Bug bounty platforms {#bug-bounty-platforms}
+
+- **[Immunefi](https://immunefi.com/)** - _Bug bounty platform for smart contracts and DeFi projects, where security researchers review code, disclose vulnerabilities, get paid, and make crypto safer._
+
+- **[HackerOne](https://www.hackerone.com/)** - _Vulnerability coordination and bug bounty platform that connects businesses with penetration testers and cybersecurity researchers._
+
+### Publications of known smart contract vulnerabilities and exploits {#common-smart-contract-vulnerabilities-and-exploits}
 
 - **[ConsenSys: Smart Contract Known Attacks](https://consensys.github.io/smart-contract-best-practices/attacks/)** - _Beginner-friendly explanation of the most significant contract vulnerabilities, with sample code for most cases._