Merge pull request #8594 from ethereum/dev

Deploy v6.9.4
ethereum · Nov 15, 2022 · e09fac5 · e09fac5
2 parents 966f5f8 + a76c2af
commit e09fac5
Show file tree

Hide file tree

Showing 39 changed files with 1,641 additions and 1,004 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "6.9.3",
+  "version": "6.9.4",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",

diff --git a/src/assets/exchanges/ftx.png b/src/assets/exchanges/ftx.png
diff --git a/src/components/EthExchanges.tsx b/src/components/EthExchanges.tsx
@@ -154,8 +154,6 @@ type ExchangeName =
   | "coinspot"
   | "cryptocom"
   | "easycrypto"
-  | "ftx"
-  | "ftxus"
   | "gateio"
   | "gemini"
   | "huobiglobal"
@@ -241,8 +239,6 @@ const EthExchanges = () => {
           country
           cryptocom
           easycrypto
-          ftx
-          ftxus
           gateio
           gemini
           huobiglobal
@@ -317,12 +313,6 @@ const EthExchanges = () => {
       easycrypto: file(relativePath: { eq: "exchanges/easycrypto.png" }) {
         ...cardListImage
       }
-      ftx: file(relativePath: { eq: "exchanges/ftx.png" }) {
-        ...cardListImage
-      }
-      ftxus: file(relativePath: { eq: "exchanges/ftx.png" }) {
-        ...cardListImage
-      }
       gateio: file(relativePath: { eq: "exchanges/gateio.png" }) {
         ...cardListImage
       }
@@ -462,18 +452,6 @@ const EthExchanges = () => {
       image: data.easycrypto,
       usaExceptions: [],
     },
-    ftx: {
-      name: "FTX",
-      url: "https://ftx.com/",
-      image: data.ftx,
-      usaExceptions: [],
-    },
-    ftxus: {
-      name: "FTX US",
-      url: "https://ftx.us/",
-      image: data.ftx,
-      usaExceptions: ["NY"],
-    },
     gateio: {
       name: "Gate.io",
       url: "https://www.gate.io/",

diff --git a/src/components/FeedbackWidget.tsx b/src/components/FeedbackWidget.tsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef, useMemo } from "react"
 import { useIntl } from "react-intl"
 import styled from "@emotion/styled"
 import FocusTrap from "focus-trap-react"
+import { Text, ScaleFade, Box } from "@chakra-ui/react"
 // Component imports
 import Translation from "./Translation"
 import Button from "./Button"
@@ -20,9 +21,11 @@ import { useSurvey } from "../hooks/useSurvey"
 
 const FixedDot = styled(NakedButton)<{
   bottomOffset: number
+  isExpanded: boolean
 }>`
+  height: 3rem;
   width: 3rem;
-  aspect-ratio: 1;
+  padding: 11px;
   border-radius: 50%;
   background-color: ${({ theme }) => theme.colors.primary};
   box-shadow: 0px 4px 4px ${({ theme }) => theme.colors.tableItemBoxShadow};
@@ -33,6 +36,10 @@ const FixedDot = styled(NakedButton)<{
     bottom: ${({ bottomOffset }) => 1 + bottomOffset}rem;
     margin-top: 150vh;
   }
+  @media (min-width: ${({ theme }) => theme.breakpoints.l}) {
+    width: ${({ isExpanded }) => (isExpanded ? "15rem" : "3rem")};
+    border-radius: ${({ isExpanded }) => (isExpanded ? "50px" : "50%")};
+  }
   right: 1rem;
   z-index: 98; /* Below the mobile menu */
   display: flex;
@@ -43,7 +50,9 @@ const FixedDot = styled(NakedButton)<{
     transform: scale(1.1);
     transition: transform 0.2s ease-in-out;
   }
-  transition: transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, width 0.25s linear,
+    border-radius 0.25s linear;
+  overflow: hidden;
 `
 
 const ModalBackground = styled.div`
@@ -128,6 +137,9 @@ const ButtonContainer = styled.div`
 `
 
 const StyledFeedbackGlyph = styled(FeedbackGlyph)`
+  min-width: 26px;
+  min-height: 32px;
+  margin: 11px 0px;
   path {
     fill: ${({ theme }) => theme.colors.white};
   }
@@ -155,6 +167,7 @@ const FeedbackWidget: React.FC<IProps> = ({ className }) => {
   useOnClickOutside(containerRef, () => handleClose(), [`mousedown`])
   const [location, setLocation] = useState("")
   const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [isExpanded, setIsExpanded] = useState<boolean>(false)
   const [feedbackSubmitted, setFeedbackSubmitted] = useState<boolean>(false)
 
   useEffect(() => {
@@ -163,7 +176,12 @@ const FeedbackWidget: React.FC<IProps> = ({ className }) => {
       // Reset component state when path (location) changes
       setIsOpen(false)
       setFeedbackSubmitted(false)
+      setIsExpanded(false)
     }
+
+    let expandTimeout = setTimeout(() => setIsExpanded(true), 30000)
+
+    return () => clearTimeout(expandTimeout)
   }, [])
 
   const surveyUrl = useSurvey(feedbackSubmitted)
@@ -182,6 +200,7 @@ const FeedbackWidget: React.FC<IProps> = ({ className }) => {
 
   const handleClose = (): void => {
     setIsOpen(false)
+    setIsExpanded(false)
     trackCustomEvent({
       eventCategory: `FeedbackWidget toggled`,
       eventAction: `Clicked`,
@@ -212,6 +231,7 @@ const FeedbackWidget: React.FC<IProps> = ({ className }) => {
     })
     window && surveyUrl && window.open(surveyUrl, "_blank")
     setIsOpen(false) // Close widget without triggering redundant tracker event
+    setIsExpanded(false)
   }
 
   useKeyPress(`Escape`, handleClose)
@@ -220,8 +240,38 @@ const FeedbackWidget: React.FC<IProps> = ({ className }) => {
 
   return (
     <>
-      <FixedDot onClick={handleOpen} bottomOffset={bottomOffset} id="dot">
-        <StyledFeedbackGlyph />
+      <FixedDot
+        onClick={handleOpen}
+        bottomOffset={bottomOffset}
+        isExpanded={isExpanded}
+        id="dot"
+      >
+        <Box
+          display="flex"
+          justifyContent="space-evenly"
+          width={{ base: "3rem", lg: isExpanded ? "13.5rem" : "3rem" }}
+          position={{
+            base: "inherit",
+            lg: isExpanded ? "absolute" : "inherit",
+          }}
+        >
+          <StyledFeedbackGlyph />
+          {isExpanded && (
+            <ScaleFade in={isExpanded} delay={0.25}>
+              <Text
+                as="div"
+                color="white"
+                fontWeight="bold"
+                noOfLines={2}
+                height="100%"
+                alignItems="center"
+                display={{ base: "none", lg: isExpanded ? "flex" : "none" }}
+              >
+                <Translation id="feedback-card-prompt-page" />
+              </Text>
+            </ScaleFade>
+          )}
+        </Box>
       </FixedDot>
       {isOpen && (
         <ModalBackground>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -9,7 +9,7 @@ import { LocaleProvider } from "gatsby-theme-i18n"
 import { lightTheme, darkTheme } from "../theme"
 
 import Footer from "./Footer"
-import VisuallyHidden from "./VisuallyHidden"
+import ZenMode from "./ZenMode"
 import Nav from "./Nav"
 import SideNav from "./SideNav"
 import SideNavMobile from "./SideNavMobile"
@@ -148,43 +148,41 @@ const Layout: React.FC<IProps> = ({
       <IntlProvider locale={locale!} key={locale} messages={messages}>
         <ApolloProvider client={client}>
           <ThemeProvider theme={theme}>
-            <SkipLink hrefId="#main-content" />
-            <TranslationBanner
-              shouldShow={shouldShowTranslationBanner}
-              isPageContentEnglish={isPageContentEnglish}
-              isPageRightToLeft={isPageRightToLeft}
-              originalPagePath={pageContext.originalPath!}
-            />
-            <TranslationBannerLegal
-              shouldShow={isLegal}
-              isPageRightToLeft={isPageRightToLeft}
-              originalPagePath={pageContext.originalPath!}
-            />
-            <ContentContainer>
-              <VisuallyHidden isHidden={isZenMode}>
-                <Nav path={path} />
-                {shouldShowSideNav && <SideNavMobile path={path} />}
-              </VisuallyHidden>
-              <SkipLinkAnchor id="main-content" />
-              <MainContainer>
-                {shouldShowSideNav && (
-                  <VisuallyHidden isHidden={isZenMode}>
-                    <SideNav path={path} />
-                  </VisuallyHidden>
-                )}
-                <MainContent>
-                  <ZenModeContext.Provider
-                    value={{ isZenMode, handleZenModeChange }}
-                  >
+            <ZenModeContext.Provider value={{ isZenMode, handleZenModeChange }}>
+              <SkipLink hrefId="#main-content" />
+              <TranslationBanner
+                shouldShow={shouldShowTranslationBanner}
+                isPageContentEnglish={isPageContentEnglish}
+                isPageRightToLeft={isPageRightToLeft}
+                originalPagePath={pageContext.originalPath!}
+              />
+              <TranslationBannerLegal
+                shouldShow={isLegal}
+                isPageRightToLeft={isPageRightToLeft}
+                originalPagePath={pageContext.originalPath!}
+              />
+              <ContentContainer>
+                <ZenMode>
+                  <Nav path={path} />
+                  {shouldShowSideNav && <SideNavMobile path={path} />}
+                </ZenMode>
+                <SkipLinkAnchor id="main-content" />
+                <MainContainer>
+                  {shouldShowSideNav && (
+                    <ZenMode>
+                      <SideNav path={path} />
+                    </ZenMode>
+                  )}
+                  <MainContent>
                     <Main>{children}</Main>
-                  </ZenModeContext.Provider>
-                </MainContent>
-              </MainContainer>
-              <VisuallyHidden isHidden={isZenMode}>
-                <Footer />
-              </VisuallyHidden>
-              <FeedbackWidget />
-            </ContentContainer>
+                  </MainContent>
+                </MainContainer>
+                <ZenMode>
+                  <Footer />
+                </ZenMode>
+                <FeedbackWidget />
+              </ContentContainer>
+            </ZenModeContext.Provider>
           </ThemeProvider>
         </ApolloProvider>
       </IntlProvider>

diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx
@@ -171,9 +171,7 @@ const QuizWidget: React.FC<IProps> = ({ quizKey, maxQuestions }) => {
       eventCategory: "Quiz widget",
       eventAction: "Question answered",
       eventName: `QID: ${questionId}`,
-      eventValue: answer.isCorrect
-        ? `Correct answer`
-        : `AID: ${answer.answerId}`,
+      eventValue: answer.isCorrect ? "1" : "0",
     })
     setShowAnswer(true)
   }

diff --git a/src/components/Staking/StakingStatsBox.tsx b/src/components/Staking/StakingStatsBox.tsx
@@ -16,6 +16,7 @@ import { getLocaleForNumberFormat } from "../../utils/translations"
 // Constants
 const NA_ERROR = "n/a"
 const ZERO = "0"
+const MAX_EFFECTIVE_BALANCE = 32
 
 // Styled components
 const Container = styled.div`
@@ -73,11 +74,15 @@ const StyledIcon = styled(Icon)`
   }
 `
 
-const BeaconchainTooltip = () => (
+// BeaconchainTooltip component
+const BeaconchainTooltip = ({ isEthStore }: { isEthStore?: boolean }) => (
   <Tooltip
     content={
       <div>
         <Translation id="data-provided-by" />{" "}
+        {isEthStore && (
+          <Link to="https://github.com/gobitfly/eth.store/">ETH.STORE, </Link>
+        )}
         <Link to="https://beaconcha.in">Beaconcha.in</Link>
       </div>
     }
@@ -106,6 +111,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
       intl.locale as Lang
     )
 
+    // Helper functions
     const formatInteger = (amount: number): string =>
       new Intl.NumberFormat(localeForStatsBoxNumbers).format(amount)
 
@@ -116,35 +122,27 @@ const StakingStatsBox: React.FC<IProps> = () => {
         maximumSignificantDigits: 2,
       }).format(amount)
 
+    // API call, data formatting, and state setting
     ;(async () => {
       try {
         const {
-          data: { totalvalidatorbalance, validatorscount },
+          data: { apr, effective_balances_sum_wei },
         } = await getData<{
-          data: { totalvalidatorbalance: number; validatorscount: number }
-        }>("https://mainnet.beaconcha.in/api/v1/epoch/latest")
-        const valueTotalEth = formatInteger(
-          Number((totalvalidatorbalance * 1e-9).toFixed(0))
+          data: { apr: number; effective_balances_sum_wei: number }
+        }>("https://beaconcha.in/api/v1/ethstore/latest")
+        const totalEffectiveBalance: number = effective_balances_sum_wei * 1e-18
+        const valueTotalEth = formatInteger(Math.floor(totalEffectiveBalance))
+        const valueTotalValidators = formatInteger(
+          totalEffectiveBalance / MAX_EFFECTIVE_BALANCE
         )
-        const valueTotalValidators = formatInteger(validatorscount)
+        const valueCurrentApr = formatPercentage(apr)
         setTotalEth(valueTotalEth)
         setTotalValidators(valueTotalValidators)
-      } catch (error) {
-        setTotalEth(null)
-        setTotalValidators(null)
-      }
-    })()
-    ;(async () => {
-      try {
-        const {
-          data: { apr },
-        } = await getData<{
-          data: { apr: number }
-        }>("https://beaconcha.in/api/v1/ethstore/650")
-        const valueCurrentApr = formatPercentage(apr)
         setCurrentApr(valueCurrentApr)
       } catch (error) {
+        setTotalEth(null)
         setCurrentApr(null)
+        setTotalValidators(null)
       }
     })()
   }, [intl.locale])
@@ -185,7 +183,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
         )}
         <Label>
           <Translation id="page-staking-stats-box-metric-3" />
-          <BeaconchainTooltip />
+          <BeaconchainTooltip isEthStore />
         </Label>
       </Cell>
     </Container>