Merge pull request #11919 from ethereum/autoformat

Autoformat files

.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": {

.storybook/preview.ts

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

next.config.js

@@ -6,14 +6,14 @@ const LIMIT_CPUS = Number(process.env.LIMIT_CPUS || 2)
 
 const experimental = LIMIT_CPUS
   ? {
-    // This option could be enabled in the future when flagged as stable, to speed up builds
-    // (see https://nextjs.org/docs/pages/building-your-application/configuring/mdx#using-the-rust-based-mdx-compiler-experimental)
-    // mdxRs: true,
-
-    // Reduce the number of cpus and disable parallel threads in prod envs to consume less memory
-    workerThreads: false,
-    cpus: LIMIT_CPUS,
-  }
+      // This option could be enabled in the future when flagged as stable, to speed up builds
+      // (see https://nextjs.org/docs/pages/building-your-application/configuring/mdx#using-the-rust-based-mdx-compiler-experimental)
+      // mdxRs: true,
+
+      // Reduce the number of cpus and disable parallel threads in prod envs to consume less memory
+      workerThreads: false,
+      cpus: LIMIT_CPUS,
+    }
   : {}
 
 /** @type {import('next').NextConfig} */

package.json

@@ -9,6 +9,7 @@
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
     "preversion": "bash ./src/scripts/updatePublishDate.sh",
     "crowdin-contributors": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/getCrowdinContributors.ts",
     "storybook": "storybook dev -p 6006",

src/components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { AvatarGroup, HStack,VStack } from "@chakra-ui/react"
+import { AvatarGroup, HStack, VStack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import Avatar from "."

src/components/Banners/BugBountyBanner.tsx

@@ -9,8 +9,8 @@ const BugBountyBanner: React.FC = () => (
   <BannerNotification shouldShow>
     <Center>
       <Text m={0} p={0}>
-        All Dencun-related bounties currently receive a 2x bonus multiplier
-        (up to 500,000 USD) up to two weeks before the scheduled mainnet hardfork.
+        All Dencun-related bounties currently receive a 2x bonus multiplier (up
+        to 500,000 USD) up to two weeks before the scheduled mainnet hardfork.
       </Text>
     </Center>
   </BannerNotification>

src/components/BaseStories/Radio.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Flex,Radio as RadioComponent, RadioGroup } from "@chakra-ui/react"
+import { Flex, Radio as RadioComponent, RadioGroup } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
 type RadioType = typeof RadioComponent

src/components/Codeblock.tsx

@@ -11,8 +11,7 @@ import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
-;
-(typeof global !== "undefined" ? global : window).Prism = Prism
+;(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 
 const LINES_BEFORE_COLLAPSABLE = 8
@@ -218,7 +217,7 @@ const Codeblock: React.FC<IProps> = ({
   codeLanguage,
   fromHomepage = false,
 }) => {
-  const { t } = useTranslation('common')
+  const { t } = useTranslation("common")
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
 
   const codeText = React.Children.toArray(children)
@@ -322,11 +321,7 @@ const Codeblock: React.FC<IProps> = ({
                   {allowCollapse &&
                     totalLines - 1 > LINES_BEFORE_COLLAPSABLE && (
                       <TopBarItem onClick={() => setIsCollapsed(!isCollapsed)}>
-                        {isCollapsed ? (
-                          t("show-all")
-                        ) : (
-                          t("show-less")
-                        )}
+                        {isCollapsed ? t("show-all") : t("show-less")}
                       </TopBarItem>
                     )}
                   {shouldShowCopyWidget && (
@@ -336,7 +331,7 @@ const Codeblock: React.FC<IProps> = ({
                           {!isCopied ? (
                             <>
                               <Emoji text=":clipboard:" fontSize="md" />{" "}
-                               {t("copy")}
+                              {t("copy")}
                             </>
                           ) : (
                             <>

src/components/CopyToClipboard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef,useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import ClipboardJS from "clipboard"
 import { Box } from "@chakra-ui/react"
 

src/components/EthVideo.tsx

@@ -1,7 +1,10 @@
 import { Box, useColorModeValue } from "@chakra-ui/react"
 
 const EthVideo = () => {
-  const src = useColorModeValue("ethereum-hero-light.mp4", "ethereum-hero-dark.mp4")
+  const src = useColorModeValue(
+    "ethereum-hero-light.mp4",
+    "ethereum-hero-dark.mp4"
+  )
 
   return (
     <Box>

src/components/FindWallet/WalletTable/useWalletTable.tsx

@@ -303,7 +303,7 @@ export const useWalletTable = ({
   ) => {
     const domItems: HTMLCollectionOf<Element> =
       document.getElementsByClassName(className)
-    
+
     Array.from(domItems).forEach((item) => {
       item.classList.add("fade")
     })

src/components/Leaderboard.tsx

@@ -59,8 +59,7 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
         .filter((_, idx) => idx < limit)
         .map(({ name, username, score }, idx) => {
           const hasGitHub = !!username
-          const avatarImg =
-            GITHUB_URL + (username || "random") + ".png?size=40"
+          const avatarImg = GITHUB_URL + (username || "random") + ".png?size=40"
           const avatarAlt = hasGitHub ? `${username} GitHub avatar` : ""
 
           let emoji: string | null = null

src/components/MatomoOptOut.tsx

@@ -1,5 +1,5 @@
-import { useEffect,useState } from "react"
-import { Checkbox,Flex } from "@chakra-ui/react"
+import { useEffect, useState } from "react"
+import { Checkbox, Flex } from "@chakra-ui/react"
 
 import Text from "@/components/OldText"
 

src/components/MergeArticleList.tsx

@@ -11,42 +11,70 @@ const MergeArticleList: React.FC<IProps> = () => {
   const reads: CardListItem[] = [
     {
       title: t("page-upgrades-index:page-upgrade-article-title-ethmerge"),
-      description: t("page-upgrades-index:page-upgrade-article-author-ethmerge"),
+      description: t(
+        "page-upgrades-index:page-upgrade-article-author-ethmerge"
+      ),
       link: "https://ethmerge.com/",
     },
     {
-      title: t("page-upgrades-index:page-upgrade-article-title-merge-is-coming"),
+      title: t(
+        "page-upgrades-index:page-upgrade-article-title-merge-is-coming"
+      ),
       description: t("page-upgrades-index:page-upgrade-article-author-alchemy"),
       link: "https://www.alchemy.com/the-merge",
     },
     {
-      title: t("page-upgrades-index:page-upgrade-article-title-state-of-the-merge"),
-      description: t("page-upgrades-index:page-upgrade-article-author-consensys"),
+      title: t(
+        "page-upgrades-index:page-upgrade-article-title-state-of-the-merge"
+      ),
+      description: t(
+        "page-upgrades-index:page-upgrade-article-author-consensys"
+      ),
       link: "https://consensys.net/blog/news/the-state-of-the-merge-an-update-on-ethereums-merge-to-proof-of-stake-in-2022/",
     },
     {
-      title: t("page-upgrades-index:page-upgrade-article-title-ropsten-merge-testnet"),
-      description: t("page-upgrades-index:page-upgrade-article-author-ethereum-foundation"),
+      title: t(
+        "page-upgrades-index:page-upgrade-article-title-ropsten-merge-testnet"
+      ),
+      description: t(
+        "page-upgrades-index:page-upgrade-article-author-ethereum-foundation"
+      ),
       link: "https://blog.ethereum.org/2022/05/30/ropsten-merge-announcement/",
     },
     {
-      title: t("page-upgrades-index:page-upgrade-article-title-execution-layer-specs"),
-      description: t("page-upgrades-index:page-upgrade-article-author-ethereum-foundation"),
+      title: t(
+        "page-upgrades-index:page-upgrade-article-title-execution-layer-specs"
+      ),
+      description: t(
+        "page-upgrades-index:page-upgrade-article-author-ethereum-foundation"
+      ),
       link: "https://github.com/ethereum/execution-specs/",
     },
     {
-      title: t("page-upgrades-index:page-upgrade-article-title-consensus-layer-specs"),
-      description: t("page-upgrades-index:page-upgrade-article-author-ethereum-foundation"),
+      title: t(
+        "page-upgrades-index:page-upgrade-article-title-consensus-layer-specs"
+      ),
+      description: t(
+        "page-upgrades-index:page-upgrade-article-author-ethereum-foundation"
+      ),
       link: "https://github.com/ethereum/consensus-specs/tree/dev/specs/bellatrix",
     },
     {
-      title: t("page-upgrades-index:page-upgrade-article-title-engine-api-specs"),
-      description: t("page-upgrades-index:page-upgrade-article-author-ethereum-foundation"),
+      title: t(
+        "page-upgrades-index:page-upgrade-article-title-engine-api-specs"
+      ),
+      description: t(
+        "page-upgrades-index:page-upgrade-article-author-ethereum-foundation"
+      ),
       link: "https://github.com/ethereum/execution-apis/tree/main/src/engine",
     },
     {
-      title: t("page-upgrades-index:page-upgrade-article-title-hitchhikers-guide-to-ethereum"),
-      description: t("page-upgrades-index:page-upgrade-article-author-delphi-digital"),
+      title: t(
+        "page-upgrades-index:page-upgrade-article-title-hitchhikers-guide-to-ethereum"
+      ),
+      description: t(
+        "page-upgrades-index:page-upgrade-article-author-delphi-digital"
+      ),
       link: "https://members.delphidigital.io/reports/the-hitchhikers-guide-to-ethereum",
     },
   ]

src/components/MergeInfographic/index.tsx

@@ -60,7 +60,9 @@ const MergeInfographic: React.FC<IProps> = ({ className }) => {
     <AspectRatio
       className={className}
       role="img"
-      aria-label={t("page-upgrades-index:page-upgrades-merge-infographic-alt-text")}
+      aria-label={t(
+        "page-upgrades-index:page-upgrades-merge-infographic-alt-text"
+      )}
       position="relative"
       width="100%"
       ratio={25 / 11}

src/components/Nav/Menu.tsx

@@ -79,10 +79,7 @@ const Menu: React.FC<IProps> = ({ path, sections, ...props }) => {
         const section = restSections[sectionKey]
 
         return (
-          <NavDropdown
-            key={sectionKey}
-            section={section}
-          >
+          <NavDropdown key={sectionKey} section={section}>
             {section.items.map((item, index) => (
               <NavDropdown.Item
                 key={index}

src/components/Quiz/QuizWidget/AnswerIcon.tsx

@@ -16,9 +16,7 @@ interface AnswerIconProps {
  *
  * Defaults to the `TrophyIcon` prior to answering a question
  */
-export const AnswerIcon = ({
-  answerStatus
-}: AnswerIconProps) => {
+export const AnswerIcon = ({ answerStatus }: AnswerIconProps) => {
   const commonProps = {
     color: "neutral",
   }

src/components/Quiz/QuizWidget/QuizConfetti.tsx

@@ -13,7 +13,11 @@ export const QuizConfetti = () => {
     <>
       <StarConfettiIcon {...commonProps} insetInlineStart={0} />
 
-      <StarConfettiIcon {...commonProps} insetInlineEnd={0} transform="scaleX(-100%)" />
+      <StarConfettiIcon
+        {...commonProps}
+        insetInlineEnd={0}
+        transform="scaleX(-100%)"
+      />
     </>
   )
 }

src/components/Quiz/QuizWidget/context.ts

@@ -18,10 +18,10 @@ type QuizWidgetContextType = Quiz & {
         nextQuiz: string | undefined
       }
     | false
-    numberOfCorrectAnswers: number
-    quizScore: number
-    ratioCorrect: number
-    isPassingScore: boolean
+  numberOfCorrectAnswers: number
+  quizScore: number
+  ratioCorrect: number
+  isPassingScore: boolean
   initialize: () => void
   setUserQuizProgress: Dispatch<SetStateAction<AnswerChoice[]>>
   setShowAnswer: (prev: boolean) => void

src/components/Quiz/useLocalQuizData.ts

@@ -22,10 +22,7 @@ export const INITIAL_USER_STATS: UserStats = {
 }
 
 export const useLocalQuizData = () => {
-  const data = useLocalStorage(
-    USER_STATS_KEY,
-    INITIAL_USER_STATS
-  )
+  const data = useLocalStorage(USER_STATS_KEY, INITIAL_USER_STATS)
 
   return data
 }

src/components/Roadmap/RoadmapActionCard.tsx

@@ -48,11 +48,7 @@ const RoadmapActionCard: React.FC<IProps> = ({
       borderColor="lightBorder"
     >
       <Center background="cardGradient" h="260px">
-        <Image
-          src={imgSrc}
-          alt={alt}
-          style={{ objectFit: "contain" }}
-        />
+        <Image src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
       </Center>
       <Flex p={6} flex="1" flexDir="column" justify="space-between" gap={4}>
         <Heading as="h3" size="md">

src/components/RollupProductDevDoc.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Box, Flex, Heading, ListItem, UnorderedList } from "@chakra-ui/react"
 
-import { layer2Data, Rollups,RollupType } from "@/data/layer-2/layer-2"
+import { layer2Data, Rollups, RollupType } from "@/data/layer-2/layer-2"
 
 import InlineLink from "./Link"
 import Text from "./OldText"

src/components/Search/utils.ts

@@ -102,9 +102,9 @@ export const getSearchModalStyles = (): SystemStyleObject => ({
   },
 
   ".DocSearch-Container--Stalled .DocSearch-MagnifierLabel, .DocSearch-Container--Stalled .DocSearch-LoadingIndicator":
-  {
-    color: "primary.highContrast",
-  },
+    {
+      color: "primary.highContrast",
+    },
 
   ".DocSearch-Dropdown": {
     ps: { base: 4, md: 8 },

src/components/Simulator/Explanation.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { motion } from "framer-motion"
 import { MdArrowBack } from "react-icons/md"
-import { Box, Flex, Grid, Heading,Text } from "@chakra-ui/react"
+import { Box, Flex, Grid, Heading, Text } from "@chakra-ui/react"
 
 import { Button, ButtonLink } from "../Buttons"