Homepage code example redesign

src/components/CodeModal.tsx

@@ -1,33 +1,38 @@
-import type { ReactNode } from "react"
-import {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Children, type ReactElement } from "react"
+import { useTranslation } from "next-i18next"
+import { IoMdCopy } from "react-icons/io"
+import { MdCheck } from "react-icons/md"
+import { Modal, ModalBody, ModalContent, ModalOverlay } from "@chakra-ui/react"
+
+import { Button } from "./ui/buttons/Button"
+
+import { useClipboard } from "@/hooks/useClipboard"
 
 type CodeModalProps = {
   title: string
-  children: ReactNode
+  children?: ReactElement
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
 }
 
 const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
-  const bgColor = useColorModeValue("rgb(247, 247, 247)", "rgb(25, 25, 25)")
-  const borderColor = useColorModeValue("rgb(51, 51, 51)", "rgb(242, 242, 242)")
+  const { t } = useTranslation()
+  const codeSnippet = (Children.toArray(children)[0] as ReactElement).props
+    .children.props.children
+
+  const { onCopy, hasCopied } = useClipboard(codeSnippet, {
+    timeout: 1500,
+  })
 
   return (
     <Modal
       isOpen={isOpen}
       scrollBehavior="inside"
       onClose={() => setIsOpen(false)}
     >
-      <ModalOverlay />
+      <ModalOverlay hideBelow="md" />
       <ModalContent
+        hideBelow="md"
         maxW="100vw"
         marginTop="auto"
         marginBottom="0"
@@ -36,35 +41,34 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
         p={{ base: "0", md: "0" }}
         gap="0"
       >
-        <ModalHeader
-          bg={bgColor}
-          borderColor={borderColor}
-          borderTop="1px solid"
-          borderBottom="1px solid"
-          textTransform="uppercase"
-          fontWeight="normal"
-          fontSize="md"
-          fontFamily="monospace"
-          px="6"
-          py="4"
-          me="0"
-        >
-          {title}
-        </ModalHeader>
-        <ModalCloseButton
-          position="absolute"
-          padding="0"
-          width="24px"
-          height="24px"
-          borderRadius="0"
-          color="rgb(178, 178, 178)"
-          fontSize="sm"
-          margin="0"
-          top="4"
-          insetInlineEnd="4"
-          bottom="4"
-        />
+        <div className="flex items-center border-y bg-background px-6 py-3 font-monospace uppercase">
+          <h2 className="text-md font-normal">{title}</h2>
+          <Button
+            variant="ghost"
+            className="ms-auto text-sm"
+            size="sm"
+            isSecondary
+            onClick={() => setIsOpen(false)}
+          >
+            {t("close")}
+          </Button>
+        </div>
         <ModalBody p="0">{children}</ModalBody>
+        <Button
+          variant="outline"
+          onClick={onCopy}
+          className="absolute end-4 top-20"
+        >
+          {hasCopied ? (
+            <>
+              <MdCheck /> {t("copied")}
+            </>
+          ) : (
+            <>
+              <IoMdCopy /> {t("copy")}
+            </>
+          )}
+        </Button>
       </ModalContent>
     </Modal>
   )

src/components/Codeblock.tsx

@@ -202,18 +202,18 @@ const getValidChildrenForCodeblock = (child) => {
   }
 }
 
-export type CodeblockProps = {
+export type CodeblockProps = React.HTMLAttributes<HTMLDivElement> & {
   allowCollapse?: boolean
   codeLanguage: string
   fromHomepage?: boolean
-  children: React.ReactNode
 }
 
 const Codeblock = ({
   children,
   allowCollapse = true,
   codeLanguage,
   fromHomepage = false,
+  className,
 }: CodeblockProps) => {
   const { t } = useTranslation("common")
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
@@ -227,14 +227,14 @@ const Codeblock = ({
 
   const [isCollapsed, setIsCollapsed] = useState(allowCollapse)
 
-  let className: string
+  let langClass: string
   if (React.isValidElement(children)) {
-    className = children?.props?.className
+    langClass = children?.props?.className
   } else {
-    className = codeLanguage || ""
+    langClass = codeLanguage || ""
   }
 
-  const matches = className?.match(/language-(.*)/)
+  const matches = langClass?.match(/language-(.*)/)
   const language = matches?.[1] || ""
 
   const shouldShowCopyWidget = ["js", "json", "python", "solidity"].includes(
@@ -249,12 +249,9 @@ const Codeblock = ({
   return (
     /* Overwrites codeblocks inheriting RTL styling in Right-To-Left script languages (e.g. Arabic) */
     /* Context: https://github.com/ethereum/ethereum-org-website/issues/6202 */
-    <div className="relative" dir="ltr">
+    <div className={cn("relative", className)} dir="ltr">
       <div
-        className={cn(
-          "mb-4 overflow-scroll rounded",
-          fromHomepage && "mb-0 border"
-        )}
+        className="mb-4 overflow-scroll rounded"
         style={{
           maxHeight: isCollapsed
             ? `calc((1.2rem * ${LINES_BEFORE_COLLAPSABLE}) + 4.185rem)`

src/components/ui/skeleton.tsx

@@ -48,7 +48,10 @@ const SkeletonLines = ({
     {Array(noOfLines)
       .fill(0)
       .map((_, idx) => (
-        <Skeleton key={idx} className={cn("h-3", widths[idx])} />
+        <Skeleton
+          key={idx}
+          className={cn("h-3", widths[idx % widths.length])}
+        />
       ))}
   </div>
 )

src/data/CreateWallet.ts

@@ -6,11 +6,9 @@ const mnemonic =
 const walletMnemonic = ethers.Wallet.fromMnemonic(mnemonic)
 
 // ...or from a private key
-// eslint-disable-next-line unused-imports/no-unused-vars
 const walletPrivateKey = new ethers.Wallet(walletMnemonic.privateKey)
 
 // ...or create a wallet from a random private key
-// eslint-disable-next-line unused-imports/no-unused-vars
 const randomWallet = ethers.Wallet.createRandom()
 
 walletMnemonic.address
@@ -32,7 +30,6 @@ walletMnemonic.signTransaction(tx)
 // { Promise: '0xf865808080948ba1f109551bd432803012645ac136ddd6...dfc' }
 
 // Connect to the Ethereum network using a provider
-// eslint-disable-next-line no-undef
 const wallet = walletMnemonic.connect(provider)
 
 // Query the network

src/data/SimpleDomainRegistry.sol

@@ -1,4 +1,4 @@
- // SPDX-License-Identifier: MIT
+// SPDX-License-Identifier: MIT
 pragma solidity ^0.8.1;
 
 // This is a smart contract - a program that can be deployed to the Ethereum blockchain.

src/hooks/useClipboard.ts

@@ -0,0 +1,29 @@
+import { useState } from "react"
+import { useCopyToClipboard } from "usehooks-ts"
+
+export type UseClipboardOptions = {
+  /**
+   * timeout delay (in ms) to switch back to initial state once copied.
+   */
+  timeout?: number
+}
+
+export const useClipboard = ({ timeout = 1500 }: UseClipboardOptions = {}) => {
+  const [hasCopied, setHasCopied] = useState(false)
+  const [_, copy] = useCopyToClipboard()
+
+  const onCopy = async (value: string) => {
+    try {
+      await copy(value)
+
+      setHasCopied(true)
+      setTimeout(() => {
+        setHasCopied(false)
+      }, timeout)
+    } catch (error) {
+      console.error("Failed to copy!", error)
+    }
+  }
+
+  return { onCopy, hasCopied }
+}

src/pages/index.tsx

@@ -2,6 +2,8 @@ import { Fragment, lazy, Suspense } from "react"
 import type { GetStaticProps, InferGetStaticPropsType } from "next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { FaDiscord, FaGithub } from "react-icons/fa6"
+import { IoMdCopy } from "react-icons/io"
+import { MdCheck } from "react-icons/md"
 
 import type {
   AllMetricData,
@@ -25,7 +27,7 @@ import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import Swiper from "@/components/Swiper"
 import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner"
-import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 import {
   Card,
   CardBanner,
@@ -64,6 +66,14 @@ import {
   RSS_DISPLAY_COUNT,
 } from "@/lib/constants"
 
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../tailwind/ui/accordion"
+
+import { useClipboard } from "@/hooks/useClipboard"
 import { fetchCommunityEvents } from "@/lib/api/calendarEvents"
 import { fetchEthPrice } from "@/lib/api/fetchEthPrice"
 import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
@@ -181,6 +191,8 @@ const HomePage = ({
     bentoItems,
   } = useHome()
 
+  const { onCopy, hasCopied } = useClipboard()
+
   return (
     <MainArticle className="flex w-full flex-col items-center" dir={dir}>
       <PageMetadata
@@ -349,7 +361,7 @@ const HomePage = ({
 
         {/* Builders - Blockchain's biggest builder community */}
         <Section id="builders" variant="responsiveFlex">
-          <SectionBanner>
+          <SectionBanner className="relative">
             <TwImage src={BuildersImage} alt="" />
           </SectionBanner>
 
@@ -381,10 +393,16 @@ const HomePage = ({
                 title={t("page-index:page-index-developers-code-examples")}
                 Svg={AngleBrackets}
               >
+                {/* Desktop */}
                 {codeExamples.map(({ title, description }, idx) => (
                   <button
                     key={title}
-                    className="flex flex-col gap-y-0.5 border-t px-6 py-4 hover:bg-background-highlight"
+                    className={cn(
+                      "flex flex-col gap-y-0.5 border-t px-6 py-4 hover:bg-background-highlight max-md:hidden",
+                      isModalOpen &&
+                        idx === activeCode &&
+                        "bg-background-highlight"
+                    )}
                     onClick={() => toggleCodeExample(idx)}
                   >
                     <p className="font-bold">{title}</p>
@@ -393,27 +411,68 @@ const HomePage = ({
                     </p>
                   </button>
                 ))}
+                {/* Mobile */}
+                <Accordion type="single" collapsible className="md:hidden">
+                  {codeExamples.map(
+                    ({ title, description, code, codeLanguage }) => (
+                      <AccordionItem
+                        key={title}
+                        value={title}
+                        className="relative"
+                      >
+                        <AccordionTrigger className="flex border-t px-6 py-4 hover:bg-background-highlight">
+                          <div className="flex flex-col items-start gap-y-0.5">
+                            <p className="text-md font-bold text-body">
+                              {title}
+                            </p>
+                            <p className="text-start text-sm text-body-medium">
+                              {description}
+                            </p>
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="max-h-[50vh] overflow-auto border-t">
+                          <Suspense fallback={<SkeletonLines noOfLines={16} />}>
+                            <Codeblock
+                              codeLanguage={codeLanguage}
+                              allowCollapse={false}
+                              className="[&>div]:-m-2 [&>div]:rounded-none [&_*]:!text-xs [&_pre]:p-4"
+                              fromHomepage
+                            >
+                              {code}
+                            </Codeblock>
+                            <Button
+                              onClick={() => onCopy(code)}
+                              className="absolute end-4 top-24"
+                            >
+                              {hasCopied ? <MdCheck /> : <IoMdCopy />}
+                            </Button>
+                          </Suspense>
+                        </AccordionContent>
+                      </AccordionItem>
+                    )
+                  )}
+                </Accordion>
               </WindowBox>
+              {isModalOpen && (
+                // TODO: Migrate CodeModal, CodeBlock from Chakra-UI to tailwind/shad-cn
+                <CodeModal
+                  isOpen={isModalOpen}
+                  setIsOpen={setModalOpen}
+                  title={codeExamples[activeCode].title}
+                >
+                  <Suspense fallback={<SkeletonLines noOfLines={16} />}>
+                    <Codeblock
+                      codeLanguage={codeExamples[activeCode].codeLanguage}
+                      allowCollapse={false}
+                      className="[&_pre]:p-6"
+                      fromHomepage
+                    >
+                      {codeExamples[activeCode].code}
+                    </Codeblock>
+                  </Suspense>
+                </CodeModal>
+              )}
             </div>
-
-            {isModalOpen && (
-              // TODO: Migrate CodeModal, CodeBlock from Chakra-UI to tailwind/shad-cn
-              <CodeModal
-                isOpen={isModalOpen}
-                setIsOpen={setModalOpen}
-                title={codeExamples[activeCode].title}
-              >
-                <Suspense fallback={<SkeletonLines noOfLines={16} />}>
-                  <Codeblock
-                    codeLanguage={codeExamples[activeCode].codeLanguage}
-                    allowCollapse={false}
-                    fromHomepage
-                  >
-                    {codeExamples[activeCode].code}
-                  </Codeblock>
-                </Suspense>
-              </CodeModal>
-            )}
           </SectionContent>
         </Section>