Faucet alerts + prettier

package.json

@@ -19,7 +19,7 @@
     "lint:js": "eslint . --ext js,jsx,ts,tsx --max-warnings=5",
     "lint:style": "stylelint \"**/*.css\" --fix",
     "lint:fix": "npm run lint:js -- --fix",
-    "format": "prettier --write '{blog,docs,src,static}/**/*.{md,mdx,ts,js,tsx,jsx,json}'"
+    "format": "prettier --write '{blog,docs,src}/**/*.{md,mdx,ts,js,tsx,jsx,json}'"
   },
   "lint-staged": {
     "src/**/*.{ts,js,jsx,tsx}": "npm run lint:fix",
@@ -50,9 +50,10 @@
     "launchdarkly-js-client-sdk": "^3.3.0",
     "lodash.debounce": "^4.0.8",
     "node-polyfill-webpack-plugin": "^2.0.1",
-    "prettier": "^3.0.0",
+    "prettier": "^3.3.3",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
+    "react-alert": "^7.0.3",
     "react-dom": "^18.0.0",
     "react-dropdown-select": "^4.11.2",
     "react-player": "^2.13.0",
@@ -112,4 +113,4 @@
       "@metamask/sdk-react>@metamask/sdk>eciesjs>secp256k1": false
     }
   }
-}
+}

src/components/Accordion/index.tsx

@@ -1,45 +1,57 @@
-import React, {useState} from "react";
+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'
+import CloseImg from "./close.svg";
+import Text from "@site/src/components/Text";
 
 interface IAccordion {
-    children: string | React.ReactElement;
+  children: string | React.ReactElement;
 }
 
-export default function Accordion({children}: IAccordion) {
-    const [isOpened, setIsOpened] = useState(true);
+export default function Accordion({ children }: IAccordion) {
+  const [isOpened, setIsOpened] = useState(true);
 
-    const handleClose = () => {
-        setIsOpened(value => !value)
-    }
+  const handleClose = () => {
+    setIsOpened((value) => !value);
+  };
 
-    const [title, ...body] = Array.isArray(children) ? children : [children]
+  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>
-    );
+  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}
+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}
+export function AccordionBody({ children }: { children: React.ReactElement }) {
+  return (
+    <Text as="p" className={styles.accordionContainer}>
+      {children}
     </Text>
+  );
 }

src/components/Alert/alert.module.scss

@@ -0,0 +1,85 @@
+:root[data-theme='dark'] {
+  --alert-error-background: rgb(53, 40, 41);
+  --alert-error-border: #E06470;
+  --alert-success-background: rgb(34, 48, 36);
+  --alert-success-border: #28A745;
+  --alert-info-background: rgb(61, 57, 43);
+  --alert-info-border: #FFDF70;
+}
+
+:root[data-theme='light'] {
+  --alert-error-background: rgb(248, 235, 237);
+  --alert-error-border: #D73847;
+  --alert-success-background: rgb(234, 242, 235);
+  --alert-success-border: #1C8234;
+  --alert-info-background: rgb(247, 238, 231);
+  --alert-info-border: #BF5208;
+}
+
+.alert {
+  padding: 8px 36px;
+  border-radius: 4px;
+  border-left: 4px solid;
+  position: relative;
+  width: 80vw;
+  box-shadow: var(--ifm-alert-shadow);
+
+  &.info {
+    border-color: var(--alert-info-border);
+    background-color: var(--alert-info-background);
+
+    .icon {
+      color: var(--alert-info-border)
+    }
+  }
+
+  &.success {
+    border-color: var(--alert-success-border);
+    background-color: var(--alert-success-background);
+
+    .icon {
+      color: var(--alert-success-border)
+    }
+  }
+
+  &.error {
+    border-color: var(--alert-error-border);
+    background-color: var(--alert-error-background);
+
+    .icon {
+      color: var(--alert-error-border)
+    }
+  }
+
+  .icon {
+    position: absolute;
+    left: 5px;
+    top: 8px;
+  }
+
+  .closeButton {
+    cursor: pointer;
+    display: block;
+    height: 16px;
+    line-height: 1;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    .closeIcon {
+      min-width: 16px;
+      width: 16px;
+      min-height: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.alertTitle {
+  font-weight: 500 !important;
+  margin: 0;
+}
+
+.alertText {
+  margin: 0;
+}

src/components/Alert/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { positions, types } from "react-alert";
+import styles from "./alert.module.scss";
+import clsx from "clsx";
+import CloseImg from "./close.svg";
+import InfoImg from "./info.svg";
+import SuccessImg from "./success.svg";
+import ErrorImg from "./error.svg";
+import Text from "@site/src/components/Text";
+
+export const options = {
+  position: positions.TOP_CENTER,
+  timeout: 10000,
+  offset: "5px",
+  containerStyle: {
+    zIndex: 1000,
+    marginTop: 60,
+  },
+};
+
+export const AlertTemplate = ({ style, options, message, close }) => (
+  <div
+    style={style}
+    className={clsx(
+      styles.alert,
+      options.type === types.INFO && styles.info,
+      options.type === types.SUCCESS && styles.success,
+      options.type === types.ERROR && styles.error,
+    )}
+  >
+    {options.type === types.INFO && <InfoImg className={styles.icon} />}
+    {options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
+    {options.type === types.ERROR && <ErrorImg className={styles.icon} />}
+    {message}
+    <span role="button" onClick={close} className={styles.closeButton}>
+      <CloseImg className={styles.closeIcon} />
+    </span>
+  </div>
+);
+
+export const AlertTitle = ({
+  children,
+}: {
+  children: string | React.ReactElement;
+}) => (
+  <Text as="p" className={styles.alertTitle}>
+    {children}
+  </Text>
+);
+
+export const AlertText = ({
+  children,
+}: {
+  children: string | React.ReactElement;
+}) => (
+  <Text as="p" className={styles.alertText}>
+    {children}
+  </Text>
+);

src/components/Button/index.tsx

@@ -2,14 +2,14 @@ import React from "react";
 import styles from "./button.module.scss";
 
 interface IButton {
-    onClick: VoidFunction;
-    children: string | React.ReactElement
+  onClick: VoidFunction;
+  children: string | React.ReactElement;
 }
 
-export default function Button({onClick, children}: IButton) {
-    return (
-        <button className={styles.button} onClick={onClick}>
-            {children}
-        </button>
-    );
+export default function Button({ onClick, children }: IButton) {
+  return (
+    <button className={styles.button} onClick={onClick}>
+      {children}
+    </button>
+  );
 }

src/components/CodeTerminal/CodeTerminal.jsx

@@ -29,7 +29,7 @@ const CodeTerminal = () => {
           value: keys[0].id,
           private: keys[0].private || "",
         },
-        "apiKey"
+        "apiKey",
       );
       return keys.map((item) => ({
         label: item.name,

src/components/CodeTerminal/ControlPanel.jsx

@@ -24,7 +24,7 @@ const ControlPanel = ({ keysOptions = [], initValues, onChange }) => {
     }
     if (initValues?.netName?.value === NETWORKS.PALM) {
       const noEthMethods = initMethods.filter(
-        (method) => method.value !== "eth_maxPriorityFeePerGas"
+        (method) => method.value !== "eth_maxPriorityFeePerGas",
       );
       updatedOptions.methods = [...noEthMethods];
     }

src/components/Faucet/Alerts.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { AlertTitle, AlertText } from "@site/src/components/Alert";
+
+export const AlertCommonIssue = () => (
+  <div>
+    <AlertTitle>Issue starting transaction</AlertTitle>
+    <AlertText>
+      There was an issue starting your transaction. Try again in a few minutes.
+      If the problem persists please{" "}
+      <a target="_blank" href="https://www.infura.io/contact">
+        contact us
+      </a>
+      .
+    </AlertText>
+  </div>
+);
+
+export const AlertPastActivity = () => (
+  <div>
+    <AlertTitle>No past activity</AlertTitle>
+    <AlertText>
+      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.
+    </AlertText>
+  </div>
+);
+
+export const AlertCooldown = () => (
+  <div>
+    <AlertTitle>Cooldown period</AlertTitle>
+    <AlertText>
+      You already got ETH from the faucet today. Try again in 24 hours.{" "}
+      <a target="_blank" href="https://www.infura.io/contact">
+        Contact us
+      </a>
+      .
+    </AlertText>
+  </div>
+);
+
+export const AlertSuccess = ({ url }: { url: string }) => (
+  <div>
+    <AlertTitle>Transaction successfull!</AlertTitle>
+    <AlertText>
+      Your transaction has been sent to the Ethereum/Sepolia network. You should
+      be receiving your ETH shortly.{" "}
+      <a target="_blank" href={url}>
+        View on Etherscan
+      </a>
+      .
+    </AlertText>
+  </div>
+);