Update faucet alerts (#2041)

* chore: cleanup faucet maintenance logic

* remove maintenance component export

* chore: update faucet alerting

* update alaert

* update alert

Author: AndyMBridges

src/components/Faucet/Alerts.tsx

@@ -1,140 +1,166 @@
-import React from "react";
-import { AlertTitle, AlertText } from "@site/src/components/Alert";
-import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
+import React from 'react'
+import { AlertTitle, AlertText } from '@site/src/components/Alert'
+import { trackClickForSegment } from '@site/src/lib/segmentAnalytics'
 
 const handleClickCommonIssue = () => {
   trackClickForSegment({
-    eventName: "Contact us",
+    eventName: 'Contact us',
     clickType: `Common Issue Alert`,
-    userExperience: "B",
+    userExperience: 'B',
     responseStatus: null,
     responseMsg: null,
     timestamp: Date.now(),
-  });
-};
+  })
+}
 
 const handleClickBalanceLow = () => {
   trackClickForSegment({
-    eventName: "Add funds using MetaMask",
+    eventName: 'Add funds using MetaMask',
     clickType: `Low Balance Alert`,
-    userExperience: "B",
+    userExperience: 'B',
     responseStatus: null,
     responseMsg: null,
     timestamp: Date.now(),
-  });
-};
+  })
+}
 
 const handleClickCooldown = () => {
   trackClickForSegment({
-    eventName: "Contact us",
+    eventName: 'Contact us',
     clickType: `Cooldown Alert`,
-    userExperience: "B",
+    userExperience: 'B',
     responseStatus: null,
     responseMsg: null,
     timestamp: Date.now(),
-  });
-};
+  })
+}
+
+const handleClickPoh = () => {
+  trackClickForSegment({
+    eventName: 'PoH',
+    clickType: `PoH Alert`,
+    userExperience: 'B',
+    responseStatus: null,
+    responseMsg: null,
+    timestamp: Date.now(),
+  })
+}
 
 const handleClickViewTransaction = () => {
   trackClickForSegment({
-    eventName: "View on Etherscan",
+    eventName: 'View on Etherscan',
     clickType: `Success Alert`,
-    userExperience: "B",
+    userExperience: 'B',
     responseStatus: null,
     responseMsg: null,
     timestamp: Date.now(),
-  });
-};
+  })
+}
 
 export const AlertCommonIssue = () => (
   <div>
     <AlertTitle>Issue starting transaction</AlertTitle>
     <AlertText>
       <span>
-        There was an issue starting your transaction. Try again in a few
-        minutes. If the problem persists please{" "}
+        There was an issue starting your transaction. Try again in a few minutes. If the problem
+        persists please{' '}
         <a
           data-testid="alert-common-contact-us"
           onClick={handleClickCommonIssue}
           target="_blank"
-          href="https://support.metamask.io/"
-        >
+          href="https://support.metamask.io/">
           contact support
         </a>
         .
       </span>
     </AlertText>
   </div>
-);
+)
+
+export const AlertFailedPoh = () => (
+  <div>
+    <AlertTitle>Please complete Linea Proof of Humanity</AlertTitle>
+    <AlertText>
+      <span>
+        Free users are required to complete Proof of Humanity to access the faucet. Learn more{' '}
+        <a
+          data-testid="alert-poh"
+          onClick={handleClickPoh}
+          target="_blank"
+          href="https://poh.linea.build/">
+          here
+        </a>
+        .
+      </span>
+    </AlertText>
+  </div>
+)
 
 export const AlertPastActivity = () => (
   <div>
     <AlertTitle>No past activity</AlertTitle>
     <AlertText>
-      The address provided does not have sufficient historical activity or balance on the Ethereum Mainnet. Please use a
-      different address to proceed. Read the FAQ below for more information.
+      The address provided does not have sufficient historical activity or balance on the Ethereum
+      Mainnet. Please use a different address to proceed. Read the FAQ below for more information.
     </AlertText>
   </div>
-);
+)
 
 export const AlertBalanceTooLow = () => (
   <div>
     <AlertTitle>Balance too low</AlertTitle>
     <AlertText>
       <span>
-        Your current Ethereum address does not contain enough ETH on
-        Ethereum Mainnet. You can add funds to your address using{" "}
+        Your current Ethereum address does not contain enough ETH on Ethereum Mainnet. You can add
+        funds to your address using{' '}
         <a
           data-testid="alert-balance-add-funds"
           onClick={handleClickBalanceLow}
           className="underline"
-          href="https://metamask.io/buy-crypto/"
-        >
+          href="https://metamask.io/buy-crypto/">
           MetaMask
         </a>
         .
       </span>
     </AlertText>
   </div>
-);
+)
 
 export const AlertCooldown = () => (
   <div>
     <AlertTitle>Cooldown period</AlertTitle>
     <AlertText>
       <span>
-        You already got ETH from the faucet today. Try again in 24 hours.{" "}
+        You already got ETH from the faucet today. Try again in 24 hours.{' '}
         <a
           data-testid="alert-cooldown-contact-us"
           onClick={handleClickCooldown}
           target="_blank"
-          href="https://support.metamask.io/"
-        >
+          href="https://support.metamask.io/">
           Contact us
         </a>
         .
       </span>
     </AlertText>
   </div>
-);
+)
 
 export const AlertSuccess = ({ url }: { url: string }) => (
   <div>
     <AlertTitle>Transaction successful!</AlertTitle>
     <AlertText>
       <span>
-        Your transaction has been sent to the Ethereum/Sepolia network. You
-        will receive your ETH shortly.{" "}
+        Your transaction has been sent to the Ethereum/Sepolia network. You will receive your ETH
+        shortly.{' '}
         <a
           data-testid="alert-success-etherscan"
           onClick={handleClickViewTransaction}
           target="_blank"
-          href={url}
-        >
+          href={url}>
           View on Etherscan
         </a>
         .
       </span>
     </AlertText>
   </div>
-);
+)

src/components/Faucet/index.tsx

@@ -1,4 +1,10 @@
 export { default as Faq } from './Faq'
 export { default as TransactionTable } from './TransactionTable'
 export { default as Hero } from './Hero'
-export { AlertCommonIssue, AlertPastActivity, AlertCooldown, AlertSuccess } from './Alerts'
+export {
+  AlertCommonIssue,
+  AlertPastActivity,
+  AlertCooldown,
+  AlertSuccess,
+  AlertFailedPoh,
+} from './Alerts'

src/pages/developer-tools/faucet.tsx

@@ -12,6 +12,7 @@ import {
   TransactionTable,
   Hero,
   AlertPastActivity,
+  AlertFailedPoh,
 } from '@site/src/components/Faucet'
 import { useAlert } from 'react-alert'
 import { MetamaskProviderContext } from '@site/src/theme/Root'
@@ -85,7 +86,9 @@ export default function Faucet() {
       const error = faucetResponse.error
 
       if (error) {
-        if (error.code === 'balance_too_low') {
+        if (error.code === 'failed_poh') {
+          alert.error(<AlertFailedPoh />)
+        } else if (error.code === 'balance_too_low') {
           alert.error(<AlertBalanceTooLow />)
         } else if (error.code === 'transaction_count_too_low') {
           alert.error(<AlertPastActivity />)