Faucet maintenance mode (#1475)

Faucet maintenance mode (#1475)

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 {

src/components/Button/index.tsx

@@ -5,27 +5,35 @@ 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 ? (
     <button
       className={clsx(styles.button, className)}
       onClick={onClick}
       disabled={isLoading || disabled}
     >
       {!isLoading ? children : <LoadingImg className={styles.isLoading} />}
     </button>
+  ) : (
+    <a className={clsx(styles.button, className)} href={href} target={target}>
+      {!isLoading ? children : <LoadingImg className={styles.isLoading} />}
+    </a>
   );
 }

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 (
+    <div className={styles.maintenance}>
+      <div className={styles.modal}>
+        <MaintenanceIco />
+        <Text as="h3">Our faucet is at full capacity due to high demand</Text>
+        <Text as="p">
+          We’re thrilled by the enthusiasm and are working hard to scale up. Try
+          checking back later. Thanks for your patience. Need ETH urgently?
+        </Text>
+        <Button className={styles.button} href={network === "sepolia" ? SEPOLIA_URL : LINEA_URL}>
+          Explore Alternative Faucets
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Maintenance;

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,

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;
+    }
+  }
+}

src/pages/developer-tools/faucet.tsx

@@ -1,21 +1,26 @@
-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,
   AlertCooldown,
   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 && <Maintenance network="sepolia" />}
+            {ldReady ? tabItemContent("sepolia") : null}
           </TabItem>
           <TabItem
             className={styles.content}
             value="linea"
             label="Linea Sepolia"
           >
-            {tabItemContent("linea")}
+            {isLineaMaintenance && <Maintenance network="linea" />}
+            {ldReady ? tabItemContent("linea") : null}
           </TabItem>
         </Tabs>
       </div>