ACT-1393 Component: Typography (#1410)

* ACT-1393 Component: Typography
* ACT-1386 Component: Accordion

package.json

@@ -40,6 +40,7 @@
     "@rjsf/core": "^5.18.4",
     "@rjsf/utils": "^5.18.4",
     "@rjsf/validator-ajv8": "^5.18.4",
+    "@types/react": "^18.3.3",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.5",
     "docusaurus-plugin-segment": "^1.0.4",

src/components/Accordion/accordion.module.scss

@@ -0,0 +1,63 @@
+:root[data-theme='dark'] {
+  --accordion-background: #24272A;
+  --accordion-border: rgba(132, 140, 150, 0.16);
+}
+
+:root[data-theme='light'] {
+  --accordion-background: #FFFFFF;
+  --accordion-border: rgba(187, 192, 197, 0.4);
+}
+
+.accordion {
+  background: var(--accordion-background);
+  border: 1px solid var(--accordion-border);
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .closeButton {
+      cursor: pointer;
+      margin-left: 24px;
+      display: block;
+      height: 16px;
+      line-height: 1;
+
+      .image {
+        min-width: 16px;
+        width: 16px;
+        min-height: 16px;
+        height: 16px;
+        transition: all 0.5s;
+        transform: rotate(45deg);
+
+        &.opened {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+
+  .content {
+    margin-top: 20px;
+    visibility: hidden;
+    display: none;
+
+    &.opened {
+      visibility: visible;
+      display: block
+    }
+  }
+}
+
+.accordionHeader {
+  margin: 0;
+}
+
+.accordionContainer {
+  margin: 0;
+}

src/components/Accordion/index.tsx

@@ -0,0 +1,45 @@
+import React, {useState} from "react";
+import clsx from "clsx";
+import styles from "./accordion.module.scss";
+import CloseImg from './close.svg'
+import Text from '@site/src/components/Text'
+
+interface IAccordion {
+    children: string | React.ReactElement;
+}
+
+export default function Accordion({children}: IAccordion) {
+    const [isOpened, setIsOpened] = useState(true);
+
+    const handleClose = () => {
+        setIsOpened(value => !value)
+    }
+
+    const [title, ...body] = Array.isArray(children) ? children : [children]
+
+    return (
+        <div className={styles.accordion}>
+            <div className={styles.header}>
+                {title}
+                <span role="button" onClick={handleClose} className={styles.closeButton}>
+                    <CloseImg className={clsx(styles.image, isOpened && styles.opened)}/>
+                </span>
+            </div>
+            <div className={clsx(styles.content, isOpened && styles.opened)}>
+                {body}
+            </div>
+        </div>
+    );
+}
+
+export function AccordionHeader({children}: { children: React.ReactElement }) {
+    return <Text as='h3' className={styles.accordionHeader}>
+        {children}
+    </Text>
+}
+
+export function AccordionBody({children}: { children: React.ReactElement }) {
+    return <Text as='p' className={styles.accordionContainer}>
+        {children}
+    </Text>
+}

src/components/Faucet/Faq.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import Accordion, {AccordionHeader, AccordionBody} from "@site/src/components/Accordion";
+
+interface IFaq {
+    network: 'linea' | 'sepolia';
+    className: string;
+}
+
+export default function Faq({network, className}: IFaq) {
+    switch (network) {
+        case 'linea':
+            return <div className={className}>
+                <Accordion>
+                    <AccordionHeader>
+                        Why must my address have Ethereum Mainnet activity to claim Linea ETH?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        We require an address with Ethereum Mainnet activity to safeguard the faucet from
+                        automated bots, ensuring equitable Linea ETH distribution. The amount of Linea ETH
+                        you can receive ranges from 0 to 0.5, depending on your address’s level of activity.
+                        No activity results in no Linea ETH. while a higher number of transactions can earn
+                        you up to 0.5. We maintain confidentiality over the exact criteria used to determine
+                        the amount issued to prevent any exploitation of the system, aiming to distribute
+                        testnet ETH fairly among genuine, active users.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        I’m new to Web3. What is a faucet?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        A faucet is a platform that gives you test tokens to use when testing your smart
+                        contracts. In this case, our faucet is giving you Sepolia ETH to test deploying
+                        smart contracts and sending transactions before deploying your dapp in production on
+                        Mainnet.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        What is Infura?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        Infura is the world’s most powerful suite of high availability blockchain APIs and
+                        developer tools. Infura brings together everything you need to start building on
+                        Web3, with infinitely scalable systems and exceptional documentation.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        What is Linea?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        <a target="_blank" href='https://linea.build'>Linea</a> is a type 2 zero knowledge
+                        Ethereum Virtual
+                        Machine (zkEVM). A zkEVM
+                        replicates the Ethereum environment as a rollup and allows developers to build on it
+                        as they would on Ethereum mainnet. Linea allows you to deploy any smart contract,
+                        use any tool, and develop as if you’re building on Ethereum. For users, this enables
+                        experience and security guarantees of Ethereum, but with lower transaction costs and
+                        at greater speed.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        How can I get help with using this faucet?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        <a target="_blank" href='https://www.infura.io/contact'>Contact us</a> with any
+                        issues or questions
+                        you have relating the faucet.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        How can I help make this faucet better?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        Have ideas on how to improve the faucet? Awesome! We’d love to hear them. Submit
+                        them <a target="_blank" href='https://discord.com/invite/consensys'>here.</a>
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        Where does Linea ETH come from?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        Linea ETH were intially Goerli ETH that were bridged to Linea using the canonical <a
+                        target="_blank" href='https://docs.linea.build/use-linea/bridge-funds'>bridge.</a>
+                    </AccordionBody>
+                </Accordion>
+            </div>
+        case 'sepolia':
+            return <div className={className}>
+                <Accordion>
+                    <AccordionHeader>
+                        Why must my address have Ethereum Mainnet activity to claim Sepolia ETH?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        We require an address with Ethereum Mainnet activity to safeguard the faucet from automated
+                        bots, ensuring equitable Sepolia ETH distribution. The amount of Sepolia ETH you can receive
+                        ranges from 0 to 0.5, depending on your address’s level of activity. No activity results in no
+                        Sepolia ETH. while a higher number of transactions can earn you up to 0.5. We maintain
+                        confidentiality over the exact criteria used to determine the amount issued to prevent any
+                        exploitation of the system, aiming to distribute testnet ETH fairly among genuine, active users.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        I’m new to Web3. What is a faucet?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        A faucet is a platform that gives you test tokens to use when testing your smart contracts. In
+                        this case, our faucet is giving you Sepolia ETH to test deploying smart contracts and sending
+                        transactions before deploying your dapp in production on Mainnet.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        What is Infura?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        Infura is the world’s most powerful suite of high availability blockchain APIs and developer
+                        tools. Infura brings together everything you need to start building on Web3, with infinitely
+                        scalable systems and exceptional documentation.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        How can I get help with using this faucet?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        <a target="_blank" href='https://www.infura.io/contact'>Contact us</a> with any
+                        issues or questions
+                        you have relating the faucet.
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        How can I help make this faucet better?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        Have ideas on how to improve the faucet? Awesome! We’d love to hear them. Submit
+                        them <a target="_blank" href='https://discord.com/invite/consensys'>here.</a>
+                    </AccordionBody>
+                </Accordion>
+                <Accordion>
+                    <AccordionHeader>
+                        Where does Sepolia ETH come from?
+                    </AccordionHeader>
+                    <AccordionBody>
+                        The Sepolia ETH comes from our partnership with the Ethereum Foundation. We collaborate with
+                        them to support the development community by maintaining an always on and reliable faucet
+                        enviroment for the community.
+                    </AccordionBody>
+                </Accordion>
+            </div>
+    }
+}

src/components/Faucet/index.tsx

@@ -0,0 +1 @@
+export {default as Faq} from './Faq'

src/components/Text/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./text.module.scss";
+import clsx from "clsx";
+
+interface IText {
+    as?: 'p' | 'h1' | 'h2' | 'h3';
+    children: string | React.ReactElement;
+    className?: string;
+}
+
+export default function Text({as = 'p', children, className}: IText) {
+    switch (as) {
+        case 'h1':
+            return <h1 className={clsx(styles.h1, className)}>
+                {children}
+            </h1>
+        case 'h2':
+            return <h2 className={clsx(styles.h2, className)}>
+                {children}
+            </h2>
+        case 'h3':
+            return <h3 className={clsx(styles.h3, className)}>
+                {children}
+            </h3>
+        default:
+            return <p className={clsx(styles.p, className)}>
+                {children}
+            </p>;
+    }
+}

src/components/Text/text.module.scss

@@ -0,0 +1,28 @@
+.h1 {
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 40px;
+}
+
+.h2 {
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 32px;
+
+}
+
+.h3 {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+}
+
+.p {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}

src/globals.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+    import {FC, SVGProps} from 'react'
+    const content: FC<SVGProps<SVGElement>>
+    export default content
+}

src/pages/developer-tools/faucet.module.scss

@@ -60,14 +60,20 @@
         background: none;
       }
     }
-
-    @media screen and (max-width: 996px) {
-      // top: -10px;
-    }
   }
 
   .content {
     width: 100%;
     padding: 0 var(--ifm-navbar-padding-horizontal);
+
+    .faq {
+      margin: 0 auto;
+      width: 75%;
+      max-width: 1000px;
+
+      @media screen and (max-width: 996px) {
+        width: 100%;
+      }
+    }
   }
 }