feat(core): testnet faucet page with recaptcha

.env

@@ -1,3 +1,5 @@
 NEXT_PUBLIC_RPC_URL_MAINNET="https://blockscout.mainnet.ocean.jellyfishsdk.com"
 NEXT_PUBLIC_RPC_URL_TESTNET="https://blockscout.testnet.ocean.jellyfishsdk.com"
-NEXT_PUBLIC_RPC_URL_CHANGI="https://blockscout.changi.ocean.jellyfishsdk.com"
+NEXT_PUBLIC_RPC_URL_CHANGI="https://blockscout.changi.ocean.jellyfishsdk.com"
+
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY="6LeeoO8oAAAAALPSYZr1_Itr9bBzzQBVDjgjMT0-"

next.config.js

@@ -4,13 +4,13 @@ const securityHeaders = [
     value:
       `default-src 'none';` +
       `base-uri 'self';` +
-      `child-src 'self' app.netlify.com;` +
+      `child-src 'self' app.netlify.com https://www.google.com;` +
       `form-action 'none';` +
       `frame-ancestors 'none';` +
       `img-src 'self' images.prismic.io data:;` +
       `media-src 'self';` +
       `object-src 'none';` +
-      `script-src 'self' app.netlify.com netlify-cdp-loader.netlify.app ${
+      `script-src 'self' app.netlify.com netlify-cdp-loader.netlify.app https://www.google.com/recaptcha/ https://www.gstatic.com ${
         process.env.NODE_ENV === "development" ? `'unsafe-eval'` : ""
       };` +
       `style-src 'self' fonts.googleapis.com 'unsafe-inline';` +

package.json

@@ -28,6 +28,7 @@
     "lodash": "^4.17.21",
     "react-code-blocks": "0.0.9-0",
     "react-dropzone": "^14.2.3",
+    "react-google-recaptcha": "^3.1.0",
     "react-qr-code": "^2.0.11",
     "recharts": "^2.7.1",
     "viem": "^1.1.0",
@@ -40,6 +41,7 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/cypress": "^9.0.0",
     "@types/node": "18.16.3",
+    "@types/react-google-recaptcha": "^2.1.7",
     "@types/recharts": "^1.8.24",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.6.0",

src/hooks/useMenuNavigationHelper.ts

@@ -0,0 +1,23 @@
+import { NetworkConnection } from "@contexts/Environment";
+import { useNetwork } from "@contexts/NetworkContext";
+
+export interface MenuItem {
+  label: string;
+  pathname: string;
+  testId: string;
+  childPaths: string[];
+  imagePath: string;
+}
+
+// To hide /faucet navigation menu item if not in testnet
+export default function useMenuNavigationHelper({
+  menu,
+}: {
+  menu: MenuItem[];
+}) {
+  const { connection } = useNetwork();
+
+  return connection !== NetworkConnection.TestNet
+    ? menu.filter((item) => item.label !== "Faucet")
+    : menu;
+}

src/layouts/components/Header.tsx

@@ -3,15 +3,18 @@ import Link from "@components/commons/Link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import Container from "@components/commons/Container";
-import { FiXCircle, FiMenu } from "react-icons/fi";
+import { FiMenu, FiXCircle } from "react-icons/fi";
 import Image from "next/image";
 import { getTopLevelRoute } from "shared/urlHelper";
+import useMenuNavigationHelper, {
+  MenuItem,
+} from "@hooks/useMenuNavigationHelper";
 import {
   HeaderNetworkMenu,
   HeaderNetworkMenuMobile,
 } from "./HeaderNetworkMenu";
 
-const MenuItems = [
+export const MenuItems: MenuItem[] = [
   {
     label: "Blocks",
     pathname: "/blocks",
@@ -40,6 +43,13 @@ const MenuItems = [
     childPaths: ["/token"],
     imagePath: "/menu/Tokens.svg",
   },
+  {
+    label: "Faucet",
+    pathname: "/faucet",
+    testId: "Desktop.HeaderLink.Faucet",
+    childPaths: ["/faucet"],
+    imagePath: "/menu/Transactions.svg",
+  },
 ];
 
 export default function Header(): JSX.Element {
@@ -96,9 +106,11 @@ export default function Header(): JSX.Element {
 }
 
 function DesktopNavbar({ currentPath }: { currentPath: string }): JSX.Element {
+  const filteredMenuItems = useMenuNavigationHelper({ menu: MenuItems });
+
   return (
     <div className="bg-white-50 rounded-3xl">
-      {MenuItems.map((item) => (
+      {filteredMenuItems.map((item) => (
         <HeaderLink
           label={item.label}
           pathname={item.pathname}
@@ -119,6 +131,8 @@ function MobileNavbar({
   isOpen: boolean;
   onClose: () => void;
 }): JSX.Element {
+  const filteredMenuItems = useMenuNavigationHelper({ menu: MenuItems });
+
   return (
     <>
       <div
@@ -156,7 +170,7 @@ function MobileNavbar({
           />
         </div>
         <div className="mt-4">
-          {MenuItems.map((item) => (
+          {filteredMenuItems.map((item) => (
             <HeaderMobileLink
               label={item.label}
               imagePath={item.imagePath}

src/layouts/components/HeaderNetworkMenu.tsx

@@ -107,7 +107,7 @@ export function HeaderNetworkMenuMobile(): JSX.Element {
           <a
             key={item}
             className={clsx(
-              "flex items-center justify-between cursor-pointer py-3 justify-between flex-1",
+              "flex items-center justify-between cursor-pointer py-3 flex-1",
               { "mb-16": index === networks.length - 1 }
             )}
             href={`/?network=${item}`}

src/layouts/components/SectionTitle.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+
+export default function SectionTitle({
+  title,
+}: {
+  title: string;
+}): JSX.Element {
+  return (
+    <div className="flex flex-col items-center text-center mt-[88px] md:mt-24 mx-1 md:mx-[148px] lg:mx-0 mb-6">
+      <span
+        className={clsx(
+          "font-semibold text-white-50 text-[32px] leading-10 -tracking-[0.01em]",
+          "md:text-5xl md:leading-[56px] md:-tracking-[0.02em]"
+        )}
+      >
+        {title}
+      </span>
+    </div>
+  );
+}

src/layouts/components/TextInput.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Combobox } from "@headlessui/react";
+import clsx from "clsx";
+
+export default function TextInput(): JSX.Element {
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+
+  const transitionClass = "transition duration-300 ease-in";
+
+  return (
+    <Combobox>
+      <div
+        className={clsx(
+          "relative group flex w-full rounded-lg p-[1px] bg-black-500 focus-within:bg-lightBlue black-gradient-1-shadow backdrop-blur-[6px]",
+          transitionClass
+        )}
+        data-testid="search-bar-container"
+      >
+        {!isFocused && (
+          <div
+            className={clsx(
+              " opacity-0  rounded-lg transition brand-gradient-1 group-hover:opacity-100",
+              transitionClass
+            )}
+          />
+        )}
+
+        <div className="relative flex w-full px-8 py-[22px] rounded-lg bg-black-500 black-gradient-1">
+          <Combobox.Button as="div" className="flex w-full gap-2">
+            <Combobox.Input
+              as="input"
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              placeholder="0xxxxxxx"
+              className="h-full w-full focus:outline-none bg-transparent caret-lightBlue placeholder-white-700 placeholder-opacity-50 text-white-50 text-xl tracking-[0.01em]"
+              data-testid="wallet_address_input"
+            />
+          </Combobox.Button>
+        </div>
+      </div>
+    </Combobox>
+  );
+}

src/pages/faucet/index.tsx

@@ -0,0 +1,55 @@
+import Container from "@components/commons/Container";
+import GradientCardContainer from "@components/commons/GradientCardContainer";
+import Button from "@components/commons/Button";
+import ReCAPTCHA from "react-google-recaptcha";
+import { useEffect, useState } from "react";
+import { useNetwork } from "@contexts/NetworkContext";
+import { NetworkConnection } from "@contexts/Environment";
+import { useRouter } from "next/router";
+import TextInput from "../../layouts/components/TextInput";
+import SectionTitle from "../../layouts/components/SectionTitle";
+
+// hide this page if not on testnet
+export default function Faucet() {
+  const { connection } = useNetwork();
+  const router = useRouter();
+
+  const [isCaptchaSuccessful, setIsCaptchaSuccess] = useState(false);
+  function onChange() {
+    setIsCaptchaSuccess(true);
+  }
+
+  useEffect(() => {
+    if (connection !== NetworkConnection.TestNet) {
+      router.push(`/404?network=${connection}`);
+    }
+  }, [connection]);
+
+  return (
+    <Container className="px-1 md:px-0 mt-12">
+      <SectionTitle title="Testnet Faucet" />
+      <GradientCardContainer>
+        <div data-testid="blocks-list" className="p-5 md:p-10">
+          <div className="flex flex-col md:flex-row py-6 md:py-4 justify-between md:items-center relative">
+            <h1 className="font-bold text-2xl text-white-50">Wallet Address</h1>
+          </div>
+          <TextInput />
+          <div className="py-6 flex gap-x-4 flex-row justify-end">
+            <ReCAPTCHA
+              sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""}
+              onChange={() => onChange()}
+              className="text-center items-center"
+            />
+            <Button
+              testId="send_tokens_btn"
+              label="Send Tokens"
+              customStyle="font-medium text-sm md:text-base !py-2 !px-4 md:!py-3 md:!px-8 disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={!isCaptchaSuccessful}
+              onClick={() => {}}
+            />
+          </div>
+        </div>
+      </GradientCardContainer>
+    </Container>
+  );
+}