Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ACT-1393 Component: Typography #1410

Merged
merged 2 commits into from
Jul 17, 2024
Merged

ACT-1393 Component: Typography #1410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44314e4
ACT-1393 Component: Typography
Jul 16, 2024
c0345a2
fix component path
Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
63 changes: 63 additions & 0 deletions src/components/Accordion/accordion.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 4 additions & 0 deletions src/components/Accordion/close.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions src/components/Accordion/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
}
158 changes: 158 additions & 0 deletions src/components/Faucet/Faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
}
}
1 change: 1 addition & 0 deletions src/components/Faucet/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export {default as Faq} from './Faq'
30 changes: 30 additions & 0 deletions src/components/Text/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>;
}
}
28 changes: 28 additions & 0 deletions src/components/Text/text.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 5 additions & 0 deletions src/globals.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
declare module '*.svg' {
import {FC, SVGProps} from 'react'
const content: FC<SVGProps<SVGElement>>
export default content
}
14 changes: 10 additions & 4 deletions src/pages/developer-tools/faucet.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
}
}
Loading