diff --git a/package.json b/package.json index fe597005cd4..5c4e21bf758 100644 --- a/package.json +++ b/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", diff --git a/src/components/Accordion/accordion.module.scss b/src/components/Accordion/accordion.module.scss new file mode 100644 index 00000000000..2a2e2b783ca --- /dev/null +++ b/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; +} diff --git a/src/components/Accordion/close.svg b/src/components/Accordion/close.svg new file mode 100644 index 00000000000..afe93c72b6f --- /dev/null +++ b/src/components/Accordion/close.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx new file mode 100644 index 00000000000..dd0252ee140 --- /dev/null +++ b/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 ( +
+
+ {title} + + + +
+
+ {body} +
+
+ ); +} + +export function AccordionHeader({children}: { children: React.ReactElement }) { + return + {children} + +} + +export function AccordionBody({children}: { children: React.ReactElement }) { + return + {children} + +} diff --git a/src/components/Faucet/Faq.tsx b/src/components/Faucet/Faq.tsx new file mode 100644 index 00000000000..ccad76df34a --- /dev/null +++ b/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
+ + + Why must my address have Ethereum Mainnet activity to claim Linea ETH? + + + 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. + + + + + I’m new to Web3. What is a faucet? + + + 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. + + + + + What is Infura? + + + 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. + + + + + What is Linea? + + + Linea 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. + + + + + How can I get help with using this faucet? + + + Contact us with any + issues or questions + you have relating the faucet. + + + + + How can I help make this faucet better? + + + Have ideas on how to improve the faucet? Awesome! We’d love to hear them. Submit + them here. + + + + + Where does Linea ETH come from? + + + Linea ETH were intially Goerli ETH that were bridged to Linea using the canonical bridge. + + +
+ case 'sepolia': + return
+ + + Why must my address have Ethereum Mainnet activity to claim Sepolia ETH? + + + 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. + + + + + I’m new to Web3. What is a faucet? + + + 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. + + + + + What is Infura? + + + 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. + + + + + How can I get help with using this faucet? + + + Contact us with any + issues or questions + you have relating the faucet. + + + + + How can I help make this faucet better? + + + Have ideas on how to improve the faucet? Awesome! We’d love to hear them. Submit + them here. + + + + + Where does Sepolia ETH come from? + + + 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. + + +
+ } +} \ No newline at end of file diff --git a/src/components/Faucet/index.tsx b/src/components/Faucet/index.tsx new file mode 100644 index 00000000000..d682543b9c3 --- /dev/null +++ b/src/components/Faucet/index.tsx @@ -0,0 +1 @@ +export {default as Faq} from './Faq' \ No newline at end of file diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx new file mode 100644 index 00000000000..081581292b0 --- /dev/null +++ b/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

+ {children} +

+ case 'h2': + return

+ {children} +

+ case 'h3': + return

+ {children} +

+ default: + return

+ {children} +

; + } +} \ No newline at end of file diff --git a/src/components/Text/text.module.scss b/src/components/Text/text.module.scss new file mode 100644 index 00000000000..7f926f042a4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/globals.d.ts b/src/globals.d.ts new file mode 100644 index 00000000000..ec19b332d44 --- /dev/null +++ b/src/globals.d.ts @@ -0,0 +1,5 @@ +declare module '*.svg' { + import {FC, SVGProps} from 'react' + const content: FC> + export default content +} \ No newline at end of file diff --git a/src/pages/developer-tools/faucet.module.scss b/src/pages/developer-tools/faucet.module.scss index 6fefc2f87ec..4cbe86e160b 100644 --- a/src/pages/developer-tools/faucet.module.scss +++ b/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%; + } + } } } \ No newline at end of file diff --git a/src/pages/developer-tools/faucet.tsx b/src/pages/developer-tools/faucet.tsx index 47f66981a53..a29920ed40f 100644 --- a/src/pages/developer-tools/faucet.tsx +++ b/src/pages/developer-tools/faucet.tsx @@ -4,6 +4,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import styles from './faucet.module.scss' import Button from '@site/src/components/Button' +import {Faq} from '@site/src/components/Faucet' export default function Faucet() { return ( @@ -16,9 +17,11 @@ export default function Faucet() {
Ethereum Sepolia
+
Linea Sepolia
+ diff --git a/tsconfig.json b/tsconfig.json index 43205187298..b1f9549c3a0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,7 @@ ] }, "include": [ + "src/globals.d.ts", "./**/*" ], "exclude": [ diff --git a/yarn.lock b/yarn.lock index 7638c76ac24..312d4dbf897 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4252,7 +4252,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*": +"@types/react@npm:*, @types/react@npm:^18.3.3": version: 18.3.3 resolution: "@types/react@npm:18.3.3" dependencies: @@ -12633,6 +12633,7 @@ __metadata: "@rjsf/utils": ^5.18.4 "@rjsf/validator-ajv8": ^5.18.4 "@tsconfig/docusaurus": ^1.0.5 + "@types/react": ^18.3.3 "@typescript-eslint/parser": ^7.12.0 clsx: ^1.2.1 docusaurus-plugin-sass: ^0.2.5