diff --git a/docusaurus.config.js b/docusaurus.config.js index 78b6a803c5..ce0d448bf4 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -208,11 +208,7 @@ const config = { { label: "Infura dashboard", to: "developer-tools/dashboard", - }, - { - label: "Faucet", - to: "developer-tools/faucet", - }, + } ], }, { diff --git a/src/components/Accordion/accordion.module.scss b/src/components/Accordion/accordion.module.scss deleted file mode 100644 index ccb0062773..0000000000 --- a/src/components/Accordion/accordion.module.scss +++ /dev/null @@ -1,63 +0,0 @@ -: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 deleted file mode 100644 index afe93c72b6..0000000000 --- a/src/components/Accordion/close.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx deleted file mode 100644 index be288b78e8..0000000000 --- a/src/components/Accordion/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -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; - opened?: boolean; -} - -export default function Accordion({ children, opened = false }: IAccordion) { - const [isOpened, setIsOpened] = useState(opened); - - 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/Badge/badge.module.scss b/src/components/Badge/badge.module.scss deleted file mode 100644 index 9cfa67daaa..0000000000 --- a/src/components/Badge/badge.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -:root { - --badge-default-color: #6a737d; - --badge-default-bg-color: #f2f4f6; - --badge-default-border-color: transparent; - --badge-success-color: #1c8234; - --badge-success-bg-color: rgba(28, 130, 52, 0.1); - --badge-error-color: #d73847; - --badge-error-bg-color: rgba(215, 56, 71, 0.1); -} - -:root[data-theme="dark"] { - --badge-default-color: #bbc0c5; - --badge-default-bg-color: #24272a; - --badge-default-border-color: #bbc0c5; - --badge-success-color: #28a745; - --badge-success-bg-color: rgba(40, 167, 69, 0.15); - --badge-error-color: #e06470; - --badge-error-bg-color: rgba(224, 100, 112, 0.15); -} - -.badge { - display: inline-flex; - align-items: center; - font-size: 12px; - line-height: 20px; - font-weight: 500; - letter-spacing: 0.25px; - border-radius: 999px; - border: 1px solid var(--badge-default-border-color); - padding: 2px 8px; - color: var(--badge-default-color); - background-color: var(--badge-default-bg-color); - - &.success { - color: var(--badge-success-color); - background-color: var(--badge-success-bg-color); - border-color: transparent; - } - - &.error { - color: var(--badge-error-color); - background-color: var(--badge-error-bg-color); - border-color: transparent; - } -} diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx deleted file mode 100644 index a0c14c7cec..0000000000 --- a/src/components/Badge/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import styles from "./badge.module.scss"; -import clsx from "clsx"; - -type variant = "error" | "success" | "default"; - -interface IBadge { - variant?: variant; - label: string; -} - -export default function Badge({ variant = "default", label }: IBadge) { - return {label}; -} diff --git a/src/components/Faucet/Alerts.tsx b/src/components/Faucet/Alerts.tsx deleted file mode 100644 index 661f5b1e7a..0000000000 --- a/src/components/Faucet/Alerts.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import { AlertTitle, AlertText } from "@site/src/components/Alert"; - -export const AlertCommonIssue = () => ( -
- Issue starting transaction - - There was an issue starting your transaction. Try again in a few minutes. - If the problem persists please{" "} - - contact us - - . - -
-); - -export const AlertPastActivity = () => ( -
- No past activity - - The address used hasn’t been active on Ethereum Mainnet yet. To proceed, - please use an address that has activity on Ethereum Mainnet. For further - details, refer to our FAQ below. - -
-); - -export const AlertCooldown = () => ( -
- Cooldown period - - You already got ETH from the faucet today. Try again in 24 hours.{" "} - - Contact us - - . - -
-); - -export const AlertSuccess = ({ url }: { url: string }) => ( -
- Transaction successfull! - - Your transaction has been sent to the Ethereum/Sepolia network. You should - be receiving your ETH shortly.{" "} - - View on Etherscan - - . - -
-); diff --git a/src/components/Faucet/Faq.tsx b/src/components/Faucet/Faq.tsx deleted file mode 100644 index 9bb17de0cc..0000000000 --- a/src/components/Faucet/Faq.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import React from "react"; -import Accordion, { - AccordionHeader, - AccordionBody, -} from "@site/src/components/Accordion"; -import Text from "@site/src/components/Text"; - -interface IFaq { - network: "linea" | "sepolia"; - className: string; - classNameHeading: string; -} - -export default function Faq({ network, className, classNameHeading }: IFaq) { - switch (network) { - case "linea": - return ( -
-
- Frequently Asked Questions - - Answers to commonly asked questions about our faucet. - -
- - - 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 ( -
-
- Frequently Asked Questions - - Answers to commonly asked questions about our faucet. - -
- - - 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. - - -
- ); - } -} diff --git a/src/components/Faucet/Hero.tsx b/src/components/Faucet/Hero.tsx deleted file mode 100644 index 92559920d7..0000000000 --- a/src/components/Faucet/Hero.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useContext } from "react"; -import Text from "@site/src/components/Text"; -import Button from "@site/src/components/Button"; -import Input from "@site/src/components/Input"; -import clsx from "clsx"; -import { LoginContext } from "@site/src/theme/Root"; -import EthIcon from "./eth.svg"; - -import styles from "./hero.module.scss"; - -interface IHero { - className: string; - network: "linea" | "sepolia"; - handleRequest: VoidFunction; - handleOnInputChange: (valiue: string) => void; - inputValue?: string; - isLoading?: boolean; -} - -export default function Hero({ - network, - className, - handleRequest, - inputValue, - handleOnInputChange, - isLoading, -}: IHero) { - const { account, sdk, metaMaskConnectHandler } = useContext(LoginContext); - const isExtensionActive = sdk.isExtensionActive(); - - return ( -
- {!(isExtensionActive && account) && } - - {network === "linea" && "Linea Sepolia"} - {network === "sepolia" && "Sepolia"} ETH delivered straight to your - wallet. - - - {!isExtensionActive - ? "Install MetaMask for your browser to get started and request ETH." - : !account - ? "Connect your MetaMask wallet to get started and request ETH." - : "Enter your MetaMask wallet address and request ETH."} - -
- {isExtensionActive && account && ( -
- -

- The amount of {network === "linea" && "Linea Sepolia"} - {network === "sepolia" && "Sepolia"} ETH you’ll get is determined - by your addresses Ethereum Mainnet activity to ensure fair and - bot-free distribution -

-
- )} -
- {!account ? ( - - ) : ( - - )} -
-
-
- ); -} diff --git a/src/components/Faucet/Maintenance.tsx b/src/components/Faucet/Maintenance.tsx deleted file mode 100644 index 51dca3fb4f..0000000000 --- a/src/components/Faucet/Maintenance.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import MaintenanceIco from "./maintenance.svg"; -import Text from "@site/src/components/Text"; -import Button from "@site/src/components/Button"; - -import styles from "./maintenance.module.scss"; -import React from "react"; - -const Maintenance = ({ network }: { network: "linea" | "sepolia" }) => { - const SEPOLIA_URL = "https://faucetlink.to/sepolia"; - const LINEA_URL = - "https://docs.linea.build/build-on-linea/use-linea-testnet/fund"; - - return ( -
-
- - Our faucet is at full capacity due to high demand - - We’re thrilled by the enthusiasm and are working hard to scale up. Try - checking back later. Thanks for your patience. Need ETH urgently? - - -
-
- ); -}; - -export default Maintenance; diff --git a/src/components/Faucet/TransactionTable.tsx b/src/components/Faucet/TransactionTable.tsx deleted file mode 100644 index 6c1e3cd9a5..0000000000 --- a/src/components/Faucet/TransactionTable.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useMemo } from "react"; -import Link from "@docusaurus/Link"; -import Badge from "@site/src/components/Badge"; -import Table from "@site/src/components/Table"; -import Text from "@site/src/components/Text"; - -const hideCenterLetters = (word) => { - if (word.length < 10) return word; - return `${word.substring(0, 5)}...${word.substring(word.length - 4)}`; -}; - -const transformWordEnding = (value, end) => { - const upValue = Math.floor(value); - return `${upValue} ${end}${upValue === 1 ? "" : "s"} ago`; -}; - -const getDiffTime = (time) => { - if (!time) return "unknown"; - const currentTime = Date.now(); - const startTime = new Date(time).getTime(); - const deltaTimeInSec = (currentTime - startTime) / 1000; - const deltaTimeInMin = deltaTimeInSec / 60; - const deltaTimeInHours = deltaTimeInMin / 60; - const deltaTimeInDays = deltaTimeInHours / 24; - - if (deltaTimeInMin < 1) return transformWordEnding(deltaTimeInSec, "second"); - if (deltaTimeInHours < 1) - return transformWordEnding(deltaTimeInMin, "minute"); - if (deltaTimeInDays < 1) return transformWordEnding(deltaTimeInHours, "hour"); - return transformWordEnding(deltaTimeInDays, "day"); -}; - -const renderStatus = (status) => { - switch (status) { - case "success": - return "success"; - case "failed": - return "error"; - default: - return "pending"; - } -}; - -interface ITransactionTable { - className?: string; - classNameHeading?: string; - data: { - id: string; - createdAt: string; - txnHash: string; - value: string; - status: string; - }[]; -} - -export default function TransactionTable({ - className, - classNameHeading, - data, -}: ITransactionTable) { - const dataRows = useMemo(() => { - return data.map((item) => ({ - cells: [ - hideCenterLetters(item.txnHash), - getDiffTime(item.createdAt), - `${item.value} ETH`, - , - - View on Etherscan - , - ], - })); - }, []); - - return ( -
-
- Transaction History - - Here is a list of your requests from our faucet. You can get more - information about your transaction by clicking on the link. - -
- - - ); -} diff --git a/src/components/Faucet/eth.svg b/src/components/Faucet/eth.svg deleted file mode 100644 index a3b04dfb47..0000000000 --- a/src/components/Faucet/eth.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/Faucet/hero.module.scss b/src/components/Faucet/hero.module.scss deleted file mode 100644 index 68787fa4db..0000000000 --- a/src/components/Faucet/hero.module.scss +++ /dev/null @@ -1,58 +0,0 @@ -:root[data-theme="dark"] { - --hero-text-color: #fff; - --hero-image: url("/img/faucet-hero-dark.png"); -} - -:root[data-theme="light"] { - --hero-text-color: #141618; - --hero-image: url("/img/faucet-hero-light.png"); -} - -.hero { - color: var(--hero-text-color); - background-image: var(--hero-image); - background-repeat: no-repeat; - background-position: 100% 0; - background-size: contain; - - .actions { - display: flex; - - @media screen and (max-width: 996px) { - flex-direction: column; - } - - > *:not(:last-child) { - margin-right: 8px; - } - - .inputCont { - max-width: 600px; - width: 100%; - - @media screen and (max-width: 996px) { - max-width: 100%; - } - - .caption { - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 20px; - letter-spacing: 0.25px; - } - } - - .alignedButtons { - margin-top: 22px; - } - - .button { - height: 48px; - - @media screen and (max-width: 996px) { - width: 100%; - } - } - } -} diff --git a/src/components/Faucet/index.tsx b/src/components/Faucet/index.tsx deleted file mode 100644 index b6b8682615..0000000000 --- a/src/components/Faucet/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export { default as Faq } from "./Faq"; -export { default as TransactionTable } from "./TransactionTable"; -export { default as Hero } from "./Hero"; -export { default as Maintenance } from "./Maintenance"; -export { - AlertCommonIssue, - AlertPastActivity, - AlertCooldown, - AlertSuccess, -} from "./Alerts"; diff --git a/src/components/Faucet/maintenance.module.scss b/src/components/Faucet/maintenance.module.scss deleted file mode 100644 index e3ace8d553..0000000000 --- a/src/components/Faucet/maintenance.module.scss +++ /dev/null @@ -1,42 +0,0 @@ -:root[data-theme="dark"] { - --maintenance-modal-shadow: rgba(0, 0, 0, 0.4); - --maintenance-modal-background: #24272a; -} - -:root[data-theme="light"] { - --maintenance-modal-shadow: rgba(44, 59, 88, 0.1); - --maintenance-modal-background: #fff; -} - -.maintenance { - background: rgba(0, 0, 0, 0.4); - position: absolute; - top: -55px; - bottom: 0; - left: 0; - right: 0; - padding: 25px 0; - - .modal { - position: sticky; - top: 80px; - width: 100%; - max-width: 480px; - margin: 0 auto; - padding: 16px; - text-align: center; - border-radius: 8px; - background: var(--maintenance-modal-background); - box-shadow: - 0px 0px 16px 0px var(--maintenance-modal-shadow), - 0px 32px 32px 0px var(--maintenance-modal-shadow), - 0px 16px 16px 0px var(--maintenance-modal-shadow), - 0px 8px 8px 0px var(--maintenance-modal-shadow), - 0px 4px 4px 0px var(--maintenance-modal-shadow), - 0px 2px 2px 0px var(--maintenance-modal-shadow); - - .button { - padding: 0 36px; - } - } -} diff --git a/src/components/Faucet/maintenance.svg b/src/components/Faucet/maintenance.svg deleted file mode 100644 index 1e56af8ef4..0000000000 --- a/src/components/Faucet/maintenance.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx deleted file mode 100644 index 4770add3fb..0000000000 --- a/src/components/Input/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import clsx from "clsx"; - -import styles from "./input.module.scss"; - -interface IInput { - onChange?: (string) => void; - disabled?: boolean; - label?: boolean; - className?: string; - error?: string; - placeholder?: string; - value?: string; -} - -export default function Input({ - className, - onChange, - label, - disabled = false, - error, - placeholder, - value, -}: IInput) { - return ( - - ); -} diff --git a/src/components/Input/input.module.scss b/src/components/Input/input.module.scss deleted file mode 100644 index 97d9af9965..0000000000 --- a/src/components/Input/input.module.scss +++ /dev/null @@ -1,66 +0,0 @@ -:root[data-theme="dark"] { - --input-border: #848c96; - --input-background: #24272a; - --input-color: #fff; - --input-error: #e06470; -} - -:root[data-theme="light"] { - --input-border: #bbc0c5; - --input-background: #fff; - --input-color: #141618; - --input-error: #d73847; -} - -.container { - width: 100%; - - .label { - text-overflow: ellipsis; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 22px; - margin-bottom: 0; - } - - .input { - display: flex; - height: 48px; - padding: 12px 16px; - align-items: center; - gap: 10px; - align-self: stretch; - border-radius: 8px; - border: 1px solid var(--input-border); - background: var(--input-background); - overflow: hidden; - color: var(--input-color); - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 22px; - outline: none; - width: 100%; - margin-bottom: 4px; - - &:disabled { - opacity: 0.5; - pointer-events: none; - } - - &.error { - border: 1px solid var(--input-error); - } - } - - .errorMsg { - color: var(--input-error); - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 20px; - letter-spacing: 0.25px; - margin-bottom: 0; - } -} diff --git a/src/components/Input/loading.svg b/src/components/Input/loading.svg deleted file mode 100644 index 355a53ad5d..0000000000 --- a/src/components/Input/loading.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - diff --git a/src/components/Pill/index.tsx b/src/components/Pill/index.tsx deleted file mode 100644 index 40ba2fc115..0000000000 --- a/src/components/Pill/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import clsx from "clsx"; -import React, { PropsWithChildren } from "react"; -import styles from "./styles.module.css"; - -const colors = new Set(["green", "red", "yellow", "blue"]); - -type PillProps = PropsWithChildren<{ - color: "green" | "red" | "yellow" | "blue"; -}>; - -export default function Pill({ color, children }: PillProps) { - if (!colors.has(color)) { - throw new Error( - `Invalid color: ${color}. Available colors are: ${Array.from(colors).join(", ")}`, - ); - } - - return ( - - {children} - - ); -} diff --git a/src/components/Pill/styles.module.css b/src/components/Pill/styles.module.css deleted file mode 100644 index e674b80167..0000000000 --- a/src/components/Pill/styles.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.pill { - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; -} - -.pill--green { - color: var(--brand-colors-green-green800); - background: var(--brand-colors-green-green400); -} - -.pill--red { - color: var(--brand-colors-red-red500); - background: var(--brand-colors-red-red100); -} - -.pill--blue { - color: var(--brand-colors-blue-blue800); - background: var(--brand-colors-blue-blue100); -} - -.pill--yellow { - color: var(--brand-colors-yellow-yellow700); - background: var(--brand-colors-yellow-yellow300); -} diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx deleted file mode 100644 index b6ad083a9e..0000000000 --- a/src/components/Table/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import styles from "./table.module.scss"; -import clsx from "clsx"; - -type TableCell = string | React.ReactElement; - -interface TableRow { - cells: TableCell[]; -} - -interface ITable { - classes?: string; - thCells: TableCell[]; - trRows?: TableRow[]; -} - -export default function Table({ classes, thCells = [], trRows = [] }: ITable) { - return ( -
-
-
- - - {thCells.map((cell, i) => ( - - ))} - - - - {trRows.map((row, i) => ( - - {row.cells.map((cell, y) => ( - - ))} - - ))} - -
- {cell} -
- {cell} -
-
- - ); -} diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss deleted file mode 100644 index 23d88a6649..0000000000 --- a/src/components/Table/table.module.scss +++ /dev/null @@ -1,70 +0,0 @@ -:root { - --table-border-color: rgba(132, 140, 150, 0.16); - --table-bg-color: #fff; - --table-bg-thead-color: #f2f4f6; -} - -:root[data-theme="dark"] { - --table-border-color: rgba(132, 140, 150, 0.16); - --table-bg-color: #24272a; - --table-bg-thead-color: #24272a; -} - -.tableWrapper { - max-width: 1014px; - width: 100%; - margin: 0 auto; - overflow-x: auto; - margin-bottom: 24px; -} - -.tableInner { - border: 1px solid var(--table-border-color); - border-radius: 8px; - overflow: hidden; - min-width: 768px; -} - -.table { - display: table; - border-collapse: collapse; - width: 100%; - font-size: 16px; - line-height: 24px; - font-weight: 400; - margin: 0; - background-color: var(--table-bg-color); - - .thead { - background-color: var(--table-bg-thead-color); - } - - .trow { - background-color: transparent; - border-top: 1px solid var(--table-border-color); - } -} - -.throw { - background-color: transparent; - border: 0; - - .thcell { - font-size: 16px; - line-height: 24px; - font-weight: 500; - padding: 16px; - text-align: left; - background-color: transparent !important; - border: 0; - } -} - -.tdcell { - font-size: 16px; - line-height: 24px; - font-weight: 400; - padding: 16px; - background-color: transparent; - border: 0; -} diff --git a/src/lib/constants.js b/src/lib/constants.js index 9cdd73d9f9..b24c84b8d9 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -1,9 +1,12 @@ -export const PROD_APP_URL = "https://app-git-act-1382-siwsrp-full-flow-infura-web.vercel.app" //"https://app.infura.io"; +export const PROD_APP_URL = + "https://app-git-act-1382-siwsrp-full-flow-infura-web.vercel.app"; //"https://app.infura.io"; export const STAGE_APP_URL = "https://infura-app-staging.vercel.app"; export const DEV_APP_URL = "http://localhost:3000"; export const DASHBOARD_URL = - process.env.DASHBOARD_PREVIEW_URL ?? process.env.NODE_ENV === "production" ? PROD_APP_URL : DEV_APP_URL; + (process.env.DASHBOARD_PREVIEW_URL ?? process.env.NODE_ENV === "production") + ? PROD_APP_URL + : DEV_APP_URL; const TEST_TRANSACTIONS = { mainnet: { @@ -451,10 +454,11 @@ export const GET_OPTIONS = { }; export const REF_SERVICES_PATH = "/services/reference/"; -export const REF_FAUCET_PATH = "/developer-tools/faucet/"; export const REF_WALLET_PATH = "/wallet/reference/"; -export const REQUEST_PARAMS = (method = 'POST') => ({ +export const REF_ALLOW_LOGIN_PATH = [REF_SERVICES_PATH, REF_WALLET_PATH]; + +export const REQUEST_PARAMS = (method = "POST") => ({ method, headers: { Accept: "application/json", @@ -462,4 +466,4 @@ export const REQUEST_PARAMS = (method = 'POST') => ({ "Cache-Control": "no-cache", Pragma: "no-cache", }, -}); \ No newline at end of file +}); diff --git a/src/pages/developer-tools/faucet.module.scss b/src/pages/developer-tools/faucet.module.scss deleted file mode 100644 index 2029b2afe8..0000000000 --- a/src/pages/developer-tools/faucet.module.scss +++ /dev/null @@ -1,120 +0,0 @@ -:root[data-theme="dark"] { - --faucet-bg-color-primary: #252526; - --faucet-box-shadow: none; - --faucet-faq-bg: rgb(20, 22, 24); - --faucet-hero-border: rgba(132, 140, 150, 0.16); - --faucet-hero-background: #24272a; -} - -:root[data-theme="light"] { - --faucet-bg-color-primary: #ffffff; - --faucet-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06); - --faucet-faq-bg: rgb(242, 244, 246); - --faucet-hero-border: rgba(187, 192, 197, 0.4); - --faucet-hero-background: #f2f4f6; -} - -:global(.navbar) { - box-shadow: none; -} - -.authCont { - padding: var(--ifm-navbar-padding-vertical) - var(--ifm-navbar-padding-horizontal); - height: 80px; - display: flex; - justify-content: space-between; - align-items: center; - background: var(--faucet-bg-color-primary); - box-shadow: var(--ifm-navbar-shadow); - - @media screen and (max-width: 996px) { - box-shadow: none; - height: 110px; - padding-bottom: 70px; - } - - .title { - font-weight: 700; - font-size: 14px; - } -} - -.tabs { - :global(.tabs-container) { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 0; - - > *:last-child { - width: 100%; - position: relative; - } - } - - .header { - font-weight: 400; - white-space: nowrap; - position: relative; - top: -60px; - display: inline-flex; - - > li { - padding: 6px 8px; - border-bottom-width: 2px; - - &:hover { - background: none; - } - } - } - - .content { - width: 100%; - padding: 0; - - .sectionHeading { - text-align: center; - margin: 0 auto; - width: 100%; - max-width: 600px; - margin-bottom: 48px; - } - - .topContent { - margin-bottom: 60px; - padding: 0 var(--ifm-navbar-padding-horizontal); - - .hero { - max-width: 1420px; - width: 100%; - margin: 0 auto; - border-radius: 8px; - border: 1px solid var(--faucet-hero-border); - background-color: var(--faucet-hero-background); - padding: 32px; - margin-bottom: 60px; - } - } - - .bottomContent { - background: var(--faucet-faq-bg); - padding: 60px var(--ifm-navbar-padding-horizontal); - - .faq { - margin: 0 auto; - width: 100%; - max-width: 1014px; - - > *:last-child { - margin-bottom: 0; - } - - @media screen and (max-width: 996px) { - width: 100%; - } - } - } - } -} diff --git a/src/pages/developer-tools/faucet.tsx b/src/pages/developer-tools/faucet.tsx deleted file mode 100644 index 4c36af069c..0000000000 --- a/src/pages/developer-tools/faucet.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import React, { useContext, useEffect, useState } from "react"; -import Layout from "@theme/Layout"; -import Tabs from "@theme/Tabs"; -import TabItem from "@theme/TabItem"; -import ldClient from "launchdarkly"; -import { - Faq, - AlertCommonIssue, - AlertCooldown, - AlertSuccess, - TransactionTable, - Hero, - Maintenance, -} from "@site/src/components/Faucet"; -import { useAlert } from "react-alert"; -import { LoginContext } from "@site/src/theme/Root"; - -import styles from "./faucet.module.scss"; -import { DASHBOARD_URL, GET_OPTIONS } from "@site/src/lib/constants"; - -const lineaMaintenanceFlag = "linea-maintenance-mode"; -const sepoliaMaintenanceFlag = "sepolia-maintenance-mode"; - -const LINEA = [ - { - id: "01", - createdAt: "2024-06-05T13:24:49.207Z", - txnHash: - "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2", - value: "0.0001", - status: "success", - }, - { - id: "02", - createdAt: "2024-05-05T13:24:49.207Z", - txnHash: - "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2", - value: "0.0002", - status: "failed", - }, - { - id: "03", - createdAt: "2024-07-05T13:24:49.207Z", - txnHash: - "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2", - value: "0.0003", - status: "pending", - }, -]; -const SEPOLIA = [ - { - id: "03", - createdAt: "2024-07-05T13:24:49.207Z", - txnHash: - "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2", - value: "0.0003", - status: "pending", - }, - { - id: "01", - createdAt: "2024-06-05T13:24:49.207Z", - txnHash: - "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2", - value: "0.0001", - status: "success", - }, - { - id: "02", - createdAt: "2024-05-05T13:24:49.207Z", - txnHash: - "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2", - value: "0.0002", - status: "failed", - }, -]; - -export default function Faucet() { - const { userId } = useContext(LoginContext); - const alert = useAlert(); - const [transactions, setTransactions] = useState({ linea: [], sepolia: [] }); - const [isLoading, setIsLoading] = useState(false); - const [walletAddress, setWalletAddress] = useState(""); - const [alertType, setAlertType] = useState(1); - const [ldReady, setLdReady] = useState(false); - const [isLineaMaintenance, setIsLineaMaintenance] = useState(false); - const [isSepoliaMaintenance, setIsSepoliaMaintenance] = useState(false); - - useEffect(() => { - ldClient.waitUntilReady().then(() => { - setIsLineaMaintenance(ldClient.variation(lineaMaintenanceFlag, false)); - setIsSepoliaMaintenance( - ldClient.variation(sepoliaMaintenanceFlag, false), - ); - setLdReady(true); - }); - const handleChangeLinea = (current) => { - setIsLineaMaintenance(current); - }; - const handleChangeSepolia = (current) => { - setIsSepoliaMaintenance(current); - }; - ldClient.on(`change:${lineaMaintenanceFlag}`, handleChangeLinea); - ldClient.on(`change:${sepoliaMaintenanceFlag}`, handleChangeSepolia); - return () => { - ldClient.off(`change:${lineaMaintenanceFlag}`, handleChangeLinea); - ldClient.off(`change:${sepoliaMaintenanceFlag}`, handleChangeSepolia); - }; - }, []); - - const getTransactions = async () => { - const transactions = await fetch( - `${DASHBOARD_URL}/api/v1/faucets/linea/transactions?take=10&skip=0`, - GET_OPTIONS, - ); - console.log(transactions) - }; - - useEffect(() => { - if (userId) { - getTransactions(); - } - }, [userId]); - - const handleRequest = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - switch (alertType) { - case 1: - alert.success(); - break; - case 2: - alert.error(); - break; - default: - alert.info(); - } - setAlertType((value) => value + 1); - setWalletAddress(""); - }, 2000); - }; - - const handleOnInputChange = (value) => { - setWalletAddress(value); - }; - - const tabItemContent = (network: "linea" | "sepolia") => { - return ( - <> -
- - {transactions && ( - - )} -
-
- -
- - ); - }; - - return ( - -
- MetaMask Faucet -
-
- - - {isSepoliaMaintenance && } - {ldReady ? tabItemContent("sepolia") : null} - - - {isLineaMaintenance && } - {ldReady ? tabItemContent("linea") : null} - - -
- - ); -} diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index 86041d07ed..de7541ec3a 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -1,8 +1,6 @@ import React, { useState, useEffect, useMemo } from "react"; import { usePluginData } from "@docusaurus/useGlobalData"; -import BrowserOnly from "@docusaurus/BrowserOnly"; import ldClient from "launchdarkly"; -import { MetaMaskProvider } from "@metamask/sdk-react"; import { useLocation } from "@docusaurus/router"; import Layout from "@theme-original/Layout"; import ParserOpenRPC from "@site/src/components/ParserOpenRPC"; diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx index 7ccff719a8..7cde5a2eb3 100644 --- a/src/theme/Root.tsx +++ b/src/theme/Root.tsx @@ -10,7 +10,7 @@ import { AlertTemplate, options } from "@site/src/components/Alert"; import { MetaMaskSDK, SDKProvider } from "@metamask/sdk"; import { DASHBOARD_URL, - REF_FAUCET_PATH, + REF_ALLOW_LOGIN_PATH, REQUEST_PARAMS, } from "@site/src/lib/constants"; import { @@ -92,7 +92,7 @@ export const LoginProvider = ({ children }) => { useEffect(() => { const url = new URL(window.location.href); getStaleDate(); - if (url.pathname.includes(REF_FAUCET_PATH)) { + if (REF_ALLOW_LOGIN_PATH.includes(url.pathname)) { const token = url.searchParams.get("token"); if (token) { saveTokenString(token); @@ -163,16 +163,6 @@ export const LoginProvider = ({ children }) => { } }, [sdk, setOpenAuthModal, setUserId, setAccount, setProjects]); - console.log({ - projects, - metaMaskConnectHandler, - metaMaskDisconnect, - userId, - account, - provider, - sdk, - }); - return (