From 7fe56b5b601759c803d67ac06bc2c26003ed91c4 Mon Sep 17 00:00:00 2001 From: Vlad Lobachov Date: Fri, 2 Aug 2024 16:41:17 +0300 Subject: [PATCH] Faucet maintenance mode (#1475) Faucet maintenance mode (#1475) --- src/components/Button/button.module.scss | 8 +++- src/components/Button/index.tsx | 14 +++++-- src/components/Faucet/Maintenance.tsx | 30 +++++++++++++ src/components/Faucet/index.tsx | 1 + src/components/Faucet/maintenance.module.scss | 42 +++++++++++++++++++ src/components/Faucet/maintenance.svg | 5 +++ src/pages/developer-tools/faucet.tsx | 38 +++++++++++++++-- 7 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 src/components/Faucet/Maintenance.tsx create mode 100644 src/components/Faucet/maintenance.module.scss create mode 100644 src/components/Faucet/maintenance.svg diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss index 1ab70cff2d7..0a38a37380b 100644 --- a/src/components/Button/button.module.scss +++ b/src/components/Button/button.module.scss @@ -27,12 +27,16 @@ } } +a.button { + display: inline-flex; +} + .button { color: var(--button-color); background-color: var(--button-background-color); border: none; padding: 0 16px; - height: 40px; + height: 48px; border-radius: 24px; font-size: 14px; font-style: normal; @@ -46,6 +50,8 @@ &:hover { background-color: var(--button-hover-background-color); box-shadow: var(--button-hover-shadow); + text-decoration: none; + color: var(--button-color); } &:active { diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 9c399a76fb8..570f663840f 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -5,21 +5,25 @@ import clsx from "clsx"; import styles from "./button.module.scss"; interface IButton { - onClick: VoidFunction; + onClick?: VoidFunction; children: string | React.ReactElement; disabled?: boolean; isLoading?: boolean; className?: string; + href?: string; + target?: string; } export default function Button({ className, - onClick, + onClick = () => {}, children, disabled = false, isLoading, + href, + target = "_blank", }: IButton) { - return ( + return !href ? ( + ) : ( + + {!isLoading ? children : } + ); } diff --git a/src/components/Faucet/Maintenance.tsx b/src/components/Faucet/Maintenance.tsx new file mode 100644 index 00000000000..51dca3fb4fb --- /dev/null +++ b/src/components/Faucet/Maintenance.tsx @@ -0,0 +1,30 @@ +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/index.tsx b/src/components/Faucet/index.tsx index c55e405b765..b6b86826153 100644 --- a/src/components/Faucet/index.tsx +++ b/src/components/Faucet/index.tsx @@ -1,6 +1,7 @@ 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, diff --git a/src/components/Faucet/maintenance.module.scss b/src/components/Faucet/maintenance.module.scss new file mode 100644 index 00000000000..e3ace8d5534 --- /dev/null +++ b/src/components/Faucet/maintenance.module.scss @@ -0,0 +1,42 @@ +: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 new file mode 100644 index 00000000000..1e56af8ef42 --- /dev/null +++ b/src/components/Faucet/maintenance.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/pages/developer-tools/faucet.tsx b/src/pages/developer-tools/faucet.tsx index 714d4e7b061..65a07829e50 100644 --- a/src/pages/developer-tools/faucet.tsx +++ b/src/pages/developer-tools/faucet.tsx @@ -1,8 +1,9 @@ -import React, { useContext, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import Layout from "@theme/Layout"; import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import Button from "@site/src/components/Button"; +import ldClient from "launchdarkly"; import { Faq, AlertCommonIssue, @@ -10,12 +11,16 @@ import { AlertSuccess, TransactionTable, Hero, + Maintenance, } from "@site/src/components/Faucet"; import { useAlert } from "react-alert"; import { MetamaskProviderContext } from "@site/src/theme/Root"; import styles from "./faucet.module.scss"; +const lineaMaintenanceFlag = "linea-maintenance-mode"; +const sepoliaMaintenanceFlag = "sepolia-maintenance-mode"; + const LINEA = [ { id: "01", @@ -80,6 +85,31 @@ export default function Faucet() { const [isWalletConnected, setIsWalletConnected] = 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 handleLogin = () => { setIsLoading(true); @@ -183,14 +213,16 @@ export default function Faucet() { label="Ethereum Sepolia" default > - {tabItemContent("sepolia")} + {isSepoliaMaintenance && } + {ldReady ? tabItemContent("sepolia") : null} - {tabItemContent("linea")} + {isLineaMaintenance && } + {ldReady ? tabItemContent("linea") : null}